Uncaught SyntaxError: Cannot use import statement outside a module的解决方法

最新推荐文章于 2024-02-18 09:38:08 发布

码飞_CC

最新推荐文章于 2024-02-18 09:38:08 发布

阅读量10w+

点赞数 117

CC 4.0 BY-SA版权

分类专栏：问题解决前端之JS 文章标签： import module live server CORS ES6

本文链接：https://blog.csdn.net/cc18868876837/article/details/113915176

前端之JS 同时被 2 个专栏收录

54 篇文章

订阅专栏

问题解决

49 篇文章

订阅专栏

本文介绍了如何在本地HTML文件中使用ES6模块并解决浏览器报错，通过修改script标签的type属性为'module'，然后借助LiveServer解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地html文件中的script标签引入ES6的模块，直接在浏览器中打开该html文件，发现报错了：Uncaught SyntaxError: Cannot use import statement outside a module

对应的index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./indexes.js"></script>
</body>
</html>

对应的indexes.js:

import cal from './calculatores.js'

console.log('sum: ', cal.add(1,2))

对应的calculatores.js:

export default {
    add: function(a, b) {
        return a + b
    }
}

这里报错的原因是用了es6的语法，浏览器默认将它作为js解析会出现问题，需要将它作为模块导入，script标签默认type="text/javascript"，需要改为type="module"，更改后的index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="./indexes.js"></script>
</body>
</html>

在浏览器中打开，发现又报错了：Access to script at 'file:///E:/**********/indexes.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

从错误提示看，脚本是被跨域策略给拦截了，跨域请求只支持这些协议：http, data, chrome, chrome-extension, chrome-untrusted, https.，而我们的协议是file，这里我们需要本地起一个服务器来作为资源的提供方，简单的方式是安装VSCode的一个扩展Live Server
liveserver
该插件安装完成后，在index.html页面右键选择Open with Live Server