解决HTML访问ES模块导入main.js变量时的ReferenceError问题

你遇到的报错原因是：ES模块（带有type="module"的脚本）运行在独立的模块作用域中，导入的变量不会自动暴露到全局作用域。你在main.js中导入的arrStr1仅存在于该模块的内部作用域，普通脚本（无type="module"）无法直接访问，因此会抛出Uncaught ReferenceError。

以下是几种可行的解决方案：

方案1：将变量挂载到全局对象（window） #

修改main.js，把需要全局访问的变量赋值给window对象，使其成为全局变量：

import { arrStr1 } from "./variables.js";
// 挂载到window，暴露到全局
window.arrStr1 = arrStr1;

注意：模块脚本默认异步加载，需确保普通脚本在模块加载完成后执行，可通过DOMContentLoaded事件等待：

<script src="main.js" type="module"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  console.log(arrStr1); // 此时已能访问全局变量
});
</script>

方案2：将HTML中的脚本改为模块脚本 #

把需要访问变量的脚本也声明为模块，直接导入所需变量，无需依赖全局：

<script src="main.js" type="module"></script>
<script type="module">
// 直接从源文件导入变量
import { arrStr1 } from "./variables.js";
console.log(arrStr1);
</script>

如果希望通过main.js中转，可修改main.js导出变量：

import { arrStr1 } from "./variables.js";
// 导出变量供其他模块使用
export { arrStr1 };

然后HTML中的模块脚本从main.js导入：

<script type="module">
import { arrStr1 } from "./main.js";
console.log(arrStr1);
</script>

方案3：在模块内部直接处理逻辑 #

如果不需要在单独的脚本中执行，直接把相关逻辑放到main.js里：

import { arrStr1 } from "./variables.js";
// 直接在模块内使用变量
console.log(arrStr1);

HTML只需引入模块脚本：

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

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