如何修复“导入声明可能仅位于顶层”ECMAScript 导入错误

Len*_*uyé 4 javascript module ecmascript-6 javascript-import

我尝试遵循这篇文章的建议,并尝试使用以下代码导入 JS 模块。

\n

总之,我试图将一个类从该类导入j.js到该类中f.js,并在该类的实例上调用一个函数。

\n

我只是不断收到以下错误。所有文件都位于同一目录中。

\n
Uncaught SyntaxError: import declarations may only appear at top level of a module\n\nModule source URI is not allowed in this document: \xe2\x80\x9cfile:///C:/Users/thedr/grade-calc/nuncio/j.js\xe2\x80\x9d.\n\nCross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/thedr/grade-calc/nuncio/j.js. (Reason: CORS request not http).\n
Run Code Online (Sandbox Code Playgroud)\n

超文本标记语言

\n
  <html>\n    <body>\n        <script>\n            function f() {\n                alert("IT WORKS")\n            }\n        </script>\n\n        <script src="f.js"></script>\n        <script src="j.js" type="module"></script>\n      </body>\n </html>\n
Run Code Online (Sandbox Code Playgroud)\n

F.js

\n
import Fudge from "./j.js"\n\ntest = new Fudge();\n\ntest.attack();\n
Run Code Online (Sandbox Code Playgroud)\n

j.js

\n
export default class Fudge {\n    constructor() {}\n\n    attack() {\n        f();\n    }\n}\n
Run Code Online (Sandbox Code Playgroud)\n

Rah*_*iaz 9

要使其工作,您需要做的就是将这两个 JS 文件标记为index.html文件中的模块,它就会正常工作。

 <html>
<body>
    <script>
        function f() {
            alert("IT WORKS")
        }
    </script>

    <script src="f.js" type="module"></script>
    <script src="j.js" type="module"></script>
  </body>
Run Code Online (Sandbox Code Playgroud)