import/export declarations may appear only at a top level of a module

Question

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.

@OrkhanAlikhanov if a replace the type in the html file src with "module", the errors relative to the import/export disappear, but I get a ReferenceError, I think because the type of the function referenced in the buttons is still "javascript" (with "module" doesn't work) — Vittorio Apicella, Jan 19 '19 at 09:42
@VittorioApicella It *does* solve your import problems though. Sure, you still have other problems in the code (in particular, [trying to use `javascript:` urls instead of proper event handlers](https://stackoverflow.com/q/2479557/1048572)), but that's not what you were asking about. — Bergi, Jan 19 '19 at 11:38

score 14 · Answer 1 · answered Jan 19 '19 at 11:36

14

type="text/javascript" should be type="module"

See this thread

answered Jan 19 '19 at 11:36

Orkhan Alikhanov

9,122
3
39
60

This led to angular not being defined for me. – Logan Cundiff Nov 04 '21 at 22:09

import/export declarations may appear only at a top level of a module

1 Answers1