import/export declarations may appear only at a top level of a module
20,905
type="text/javascript"
should be type="module"
See this thread
Author by
Vittorio Apicella
Updated on July 11, 2022Comments
-
Vittorio Apicella almost 2 years
I'm new to web programming, I was trying a very simple example in order understand how it works.
html file
<html> <head> <meta charset="ISO-8859-1"> <script type="text/javascript" src="/static/js/AddButton.js"></script> <script type="text/javascript" src="/static/js/SendRequest.js"></script> <title>{{title}}</title> </head> <body> <button type="button" onclick="AddForm()"> + </button> <div id = "newFormHere"></div> <form action="javascript: SendFetchRequest()" id ="Form2"> Ticker2: <input type="text" id="Ticker2" value="GOOG"> <input type="submit" value="Submit"> <div id = "FetchRequestOutput"></div> </form> </body> </html>
I have one form (
Form2
) which sends a request to the server, and a button which adds more forms to the page.SendRequest.js (exporting functions)
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 }) }) }
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)
AddButton.js (importing functions)
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) };
Here the code to add new buttons dynamically.
I am testing this code with flask + Firefox 64. The error I'm getting is the following one.
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
I have followed the first example on this page How do I include a JavaScript file in another JavaScript file?
If a try using "modules"
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”.
the client can't even load the scripts.
-
Logan Cundiff over 2 yearsThis led to angular not being defined for me.