logo标签列表

我无法解决“Uncaught SyntaxError: Cannot use import statement outside a module”的问题。

javascriptecmascript-6
8

我在一个文件夹中有“三个”文件： 1. index.html 2. index.js 3. helper.js

我想从helper.js导出代码，并将其导入到index.js中（我已经将index.js链接到index.html）。

我像这样做了 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <button id="btn">click</button>


    <script src="./index.js"></script>
</body>
</html>

index.js

import btn from './helper'

btn.addEventListener('click', function () {
    window.alert('i am clicked')
})

最后是 helper.js

export let btn = document.getElementById('btn')

然后我在Chrome浏览器中运行index.html文件。

Chrome浏览器在控制台中显示以下消息。

未捕获的SyntaxError：无法在模块外部使用import语句

请告诉我如何解决这个问题。我在Google和YouTube上搜索，并按照他们展示的做了同样的事情。结果，浏览器显示了该消息。

2个回答
6
你需要将导入语句放在模块内部：
尝试这样做：
<script type="module">
   import btn from './helper'
</script>

参考: 浏览器中的ES模块

2
我尝试使用 **type="module"**，但是出现了错误 Access to script at 'file:///D:/testing/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. - SA Noyon Ahmed
2
现在出现了另一个错误。您尝试在没有来源的情况下访问脚本。像Chrome这样的浏览器不允许您使用JavaScript访问本地文件系统上的文件。您需要安装一个Web服务器，例如LiveServer。 - Guilherme Martin
我不会那样做，你告诉了什么？我想正常解决它，而不在index.html中产生影响。 - SA Noyon Ahmed
1
https://dev59.com/Kmoy5IYBdhLWcg3wlvCX - Guilherme Martin
你的回答让人感到困惑。 - SA Noyon Ahmed
他们所说的“模块外部”是什么意思？ - SA Noyon Ahmed
1
你需要在某个端口上使用 Web 服务器提供文件，比如说 5500 端口。然后将浏览器指向该端口，例如 localhost:5500/。
这是浏览器从另一个 js 文件导入其他模块的唯一方式。
参见... MDN 模块文档
  • 你可以使用 npm 包 http-server。
  • 或者，如果你使用 Visual Studio Code，则可以使用 Live Server 扩展。
  • 或者，你可以使用任何你喜欢的在你的系统上运行的服务器。

接下来，您需要在脚本标签中添加type="module"。

<button id="btn">click</button>


<script type="module" src="./index.js"></script>

"而你的 index.js 尝试这样做..."
import { btn } from './helper.js'

最后，你的 helper.js ....
const btn = document.getElementById('btn');

export { btn };
您可能还考虑将扩展名.mjs用于模块化的js文件，以让任何人知道它确实是一个模块。
最终我解决了我的问题...我的问题在.babelrc文件中...好的，谢谢。 - SA Noyon Ahmed
1
好的 :) .babelrc文件中有什么问题？将解决方案放在底部，这可能会帮助其他人编辑您的原始问题。编码愉快！ - Nick Sugar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接