导入ES6类时出现Cannot use import statement等报错如何解决

报错核心原因 #

• 静态import语句只能在ES模块的顶层作用域使用，不允许嵌套在window.onload回调、条件判断、普通函数等非顶层代码块中，你将import语句写在window.onload的函数内部，直接违反了ES6模块的语法规范，这是触发Unexpected identifier语法错误的根本原因。
• 浏览器原生支持的ES模块要求导入路径必须携带完整文件后缀，你写的./extended需要补全为./extended.js，否则浏览器无法正确定位对应的资源文件。

两种可选修复方案 #

方案1：顶层静态导入（通用推荐） #

将import语句移到main.js文件的最顶部即可，不需要嵌套在回调内：

// main.js 修复后代码
import Test from "./extended.js"

window.onload = function () {
  new Test()
}

引入main.js的script标签保留type="module"属性即可：

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

方案2：动态导入（仅按需加载场景使用） #

如果确实需要在回调函数内部触发导入逻辑，使用浏览器支持的动态导入语法import()，该方法为异步方法，需要配合await或then使用：

// main.js 动态导入写法
window.onload = async function () {
  // 动态导入默认导出需要取返回值的default属性
  const { default: Test } = await import("./extended.js")
  new Test()
}

内容的提问来源于stack exchange，提问作者Justin Christopher Domingo