title: import/export declarations may appear only at a top level of a module
body: <p>I'm new to web programming, I was trying a very simple example in order understand how it works.</p>
  
  <pre><code>html file
  </code></pre>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  
  &lt;script type="text/javascript" src="/static/js/AddButton.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/static/js/SendRequest.js"&gt;&lt;/script&gt;
  
  &lt;title&gt;{{title}}&lt;/title&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;button type="button" onclick="AddForm()"&gt; + &lt;/button&gt;
  
  &lt;div id = "newFormHere"&gt;&lt;/div&gt;
  
  
  &lt;form action="javascript: SendFetchRequest()" id ="Form2"&gt;
      Ticker2:
          &lt;input type="text" id="Ticker2" value="GOOG"&gt;
          &lt;input type="submit" value="Submit"&gt;
          &lt;div id = "FetchRequestOutput"&gt;&lt;/div&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have one form (<code>Form2</code>) which sends a request to the server, and a button which adds more forms to the page.</p>
  
  <pre><code>SendRequest.js (exporting functions)
  </code></pre>
  
  <pre><code>export {SendFetchRequest}
  
  
  
  function SendFetchRequest()
  {
      var Ticker = document.getElementById("Ticker2");
      fetch("action_page" + "?Ticker=" + Ticker.value).then(function(response){
              response.text().then(function(data){
                      document.getElementById("FetchRequestOutput").innerHTML = data
              })
  
      })
  
  
  }
  </code></pre>
  
  <p>Here I define the function I wish to attach to the buttons (I need to include it into the AddButton.js and in the html file)</p>
  
  <pre><code>AddButton.js  (importing functions)
  </code></pre>
  
  <pre><code>import { SendFetchRequest } from '/static/js/SendRequest.js';
  
  function AddForm()
  {
      var myform = document.createElement("FORM");
      myform.setAttribute("id", Math.random());
      myform.setAttribute("type", "form");
      myform.action = "javascript: SendFetchRequest()";
  
      myinput = document.createElement("INPUT");
      myinput.setAttribute("type", "text");
      myinput.setAttribute("value", "SomeDefaultValue");
  
      mysubmit = document.createElement("INPUT");
      mysubmit,setAttribute("type", "submit");
      mysubmit.setAttribute("value", "Submit")
  
      myform.appendChild(myinput)
      myform.appendChild(mysubmit)
  
      document.getElementById("newFormHere").appendChild(myform)
  };
  </code></pre>
  
  <p>Here the code to add new buttons dynamically.</p>
  
  <p>I am testing this code with flask + Firefox 64.
  The error I'm getting is the following one.</p>
  
  <pre><code>SyntaxError: import declarations may only appear at top level of a module AddButton.js:6 
  SyntaxError: export declarations may only appear at top level of a module  SendRequest.js:6.js:6 
  </code></pre>
  
  <p>I have followed the first example on this page
  <a href="https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file">How do I include a JavaScript file in another JavaScript file?</a></p>
  
  <p>If a try using "modules" </p>
  
  <pre><code>Loading failed for the module with source “http://127.0.0.1:5000/static/js/AddButton.mjs”.
  Loading failed for the module with source “http://127.0.0.1:5000/static/js/SendRequest.mjs”.
  </code></pre>
  
  <p>the client can't even load the scripts.</p>