导入/导出声明只能出现在模块的顶层[重复]答案

【问题标题】：import/export declarations may appear only at a top level of a module [duplicate]导入/导出声明只能出现在模块的顶层[重复]
【发布时间】：2019-06-13 09:45:57
【问题描述】：

我是网络编程的新手，我尝试了一个非常简单的例子来了解它是如何工作的。

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>

我有一个向服务器发送请求的表单 (Form2)，以及一个向页面添加更多表单的按钮。

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
            })

    })


}

在这里我定义了我希望附加到按钮的函数（我需要将它包含到 AddButton.js 和 html 文件中）

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)
};

这里是动态添加新按钮的代码。

我正在使用 flask + Firefox 64 测试此代码。我得到的错误是以下一个。

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

我已按照此页面上的第一个示例进行操作 How do I include a JavaScript file in another JavaScript file?

如果尝试使用“模块”

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”.

客户端甚至无法加载脚本。

【问题讨论】：

type="text/javascript" 应该是type="module"
@OrkhanAlikhanov 如果将 html 文件 src 中的类型替换为“模块”，则与导入/导出相关的错误消失，但我得到一个 ReferenceError，我认为是因为引用的函数的类型在按钮中仍然是“javascript”（带有“模块”不起作用）
@VittorioApicella 它确实解决了您的导入问题。当然，您的代码中还有其他问题（特别是 trying to use javascript: urls instead of proper event handlers），但这不是您要问的。

标签： javascript flask es6-modules

【解决方案1】：

type="text/javascript" 应该是type="module"

见this thread

【讨论】：

这导致没有为我定义角度。