Uncaught SyntaxError: Cannot use import statement outside a module问题解决

在项目界面中引入使用export导出的js，界面加载不出来，控制台报错：Uncaught SyntaxError: Cannot use import statement outside a module

神仙姐姐QAQ

1804人浏览 · 2022-11-20 00:37:55

神仙姐姐QAQ · 2022-11-20 00:37:55 发布

在本地创建并运行html项目时，发现页面没有加载出来，控制台查看发现如下报错：

产生报错的原因：

由于为了方便更改变量，我创建了一个js文件，在文件中声明了token变量，并使用了模块化将变量导出

封装的js代码如下：

随后，我在编写的html文件里的<script>标签中，直接使用了import将变量导入

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>cesium</title>
		<script src="../libs/Cesium/Cesium.js"></script>
		<link href="../libs/Cesium/Widgets/widgets.css" rel="stylesheet">
		<style>
			body,html{
				margin:0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="cesiumBox"></div>
		<script>
			import {token} from '../utils.js'
			Cesium.Ion.defaultAccessToken=token;
			const viewer = new Cesium.Viewer('cesiumBox')
		</script>
	</body>
</html>

分析并解决：

由于我在html中引入了使用export导出的js文件，浏览器默认将它作为js解析会出现问题，需要将它作为模块导入，script标签默认type="text/javascript"，需要在script标签上添加type="module"