Uncaught SyntaxError: Cannot use import statement outside a module

谁践踏了优雅 2022-11-24 14:06 129阅读 0赞

1、错误描述

Uncaught SyntaxError: Cannot use import statement outside a module

2、错误原因

定义了一个JavaScript文件，声明几个变量，利用模块化导出变量

let name = '张华'
    let age = 23
    let sex = '女'
    
    export {name, age, sex}

接着，在页面文件中直接导入import；打开浏览器访问页面，控制台出现报错

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/a1.js"></script>
    		<script src="../js/a2.js"></script>
    		<script>
    			import {name, age, sex} from '../js/a3.js'
    			console.log(name,age,sex)
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

3、解决办法

需要在script标签上添加属性type="module"

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/a1.js"></script>
    		<script src="../js/a2.js"></script>
    		<script type="module">
    			import {name, age, sex} from '../js/a3.js'
    			console.log(name,age,sex)
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关解决SyntaxError: import * only allowed at module level

目录解决SyntaxError: import \ only allowed at module level 错误原因解决方法 1. 使用显式的导入语句 2. 使

太过爱你忘了你带给我的痛/ 2024年02月21日 10:45/ 0 赞/ 32 阅读

相关完美解决SyntaxError: import * only allowed at module level

完美解决SyntaxError: import \ only allowed at module level ![在这里插入图片描述][a98eec5618e9416f8ad

系统管理员/ 2023年09月27日 20:14/ 0 赞/ 94 阅读

相关详细分析解决Uncaught SyntaxError: Cannot use import statement outside a module (at ...)的错误

文章目录 1. 复现错误 2. 分析错误 3. 解决错误 1. 复现错误今天在学习`es6`时，启动页面后，却报出如下图错误： ![在

不念不忘少年蓝@/ 2023年09月25日 15:43/ 0 赞/ 27 阅读

相关 html页面报错Uncaught SyntaxError: Cannot use import statement outside a module

如题所示，在我们学习es6的时候，使用export导出模块，使用import导入模块的语法时，我们需要将我们在html中声明的标签<script></script>类型

小咪咪/ 2023年06月25日 03:05/ 0 赞/ 2 阅读

相关 vue运行报错：SyntaxError: Cannot use import statement outside a module

![4f7a6168858950498b69198dc2cf5b7c.png][] PS C:\Users\wangting\Desktop\assets_web_a

左手的ㄟ右手/ 2022年12月31日 14:28/ 0 赞/ 550 阅读

相关 Uncaught SyntaxError: Cannot use import statement outside a module

1、错误描述 Uncaught SyntaxError: Cannot use import statement outside a module 2、错误原因

谁践踏了优雅/ 2022年11月24日 14:06/ 0 赞/ 130 阅读

相关 Uncaught SyntaxError: Illegal return statement(js报错)

<script> if(condition1){ return "string1"; }else if(condition2){

淩亂°似流年/ 2022年09月29日 04:25/ 0 赞/ 427 阅读

相关 Uncaught SyntaxError: Unexpected string

如果出现了这个问题，那么就是你的单引号和双引号出现了问题，因为在写javascript的时候，经常需要拼接字符串，那么很容易会遇到这个问题，仔细看一下自己的拼接字符串的引号使用

朴灿烈づ我的快乐病毒、/ 2022年09月26日 13:00/ 0 赞/ 230 阅读

相关 Uncaught SyntaxError: Unexpected token <

> 原本我的 JS 文件是放在 /src/utils 文件夹下的，但引入 /src 和 /static > 的文件是有区别的。其中区别，推荐看这篇文章：[vue中静态文件引

我不是女神ヾ/ 2022年03月01日 02:38/ 0 赞/ 213 阅读

相关 Uncaught SyntaxError: Unexpected token ")"

碰到一个很难排查的错误，记得以前处理过，光看报错信息，无法确定报错位置；从网上搜到解决方案：这个一般是对页面操作发生的错误，静态页面不报错。把源代码中的javasc

本是古典何须时尚/ 2021年08月19日 18:30/ 0 赞/ 358 阅读