使用import/export模块时报ReferenceError变量未定义该如何修正？

核心问题原因 #

• 导入路径错误：importUserList.js 中导入的目标文件名拼写错误，导出变量的文件为 exportUserList.js，代码中写的是不存在的 ./exportList.js，导致user变量根本没有导入成功，自然无法挂载到window对象上。
• 加载顺序错位：type="module" 类型的脚本默认异步加载，普通text/javascript类型的脚本同步立即执行，所以main.js会早于importUserList.js运行，此时就算路径正确，window.user也还没完成赋值。
• 全局变量访问不明确：直接访问user时如果作用域内没有该变量会抛出未定义错误，明确访问window.user可以避免作用域查找的歧义。

修正步骤 #

第一步：修正导入路径 #

修改importUserList.js代码：

// 替换错误的导入路径
import {user} from './exportUserList.js'

console.log(user)
window.user = user

第二步：调整脚本执行顺序（二选一即可） #

方案1：统一脚本类型，利用模块脚本的顺序执行特性

修改HTML中的脚本标签，把main.js也设为模块类型，模块脚本会按声明顺序依次执行：

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

此时main.js可以直接访问window.user：

let names = 'mark'
let numbers = 10

console.log(names)
console.log(numbers)
console.log(window.user)

方案2：在main.js中监听加载完成事件后再访问全局变量

无需修改HTML，仅调整main.js代码，等所有资源加载完成后再读取user：

let names = 'mark'
let numbers = 10

console.log(names)
console.log(numbers)

window.addEventListener('load', () => {
  console.log(window.user)
})

内容的提问来源于stack exchange，提问作者ukulele