JS跨文件导入变量报错：Uncaught SyntaxError问题求助

1. 修复"Cannot use import statement outside a module"报错 #

浏览器默认不会将JS文件识别为ES模块，必须在HTML引入JS时声明模块类型：

• 打开index.html，找到引入JS文件的<script>标签，添加type="module"属性：

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

• 提示：只要用到import/export语法的JS文件，都必须以模块方式引入，否则浏览器会抛出语法错误。

2. 修正script1.js的导入路径错误 #

你当前误导入了自身文件，需要替换为正确的script.js路径：

• 打开script1.js，把错误的导入语句（比如import { arr } from './script1.js'）修改为：

import { arr } from './script.js';

• 由于两个JS文件在同一script文件夹下，直接使用同级相对路径即可。

3. 确保script.js的导出语法正确 #

确认script.js中数组的导出方式符合ES模块规范，示例如下：

// script.js中定义并导出数组
export let arr = [];

// 表单输入存入数组的示例逻辑
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const inputVal = document.querySelector('input').value;
  arr.push(inputVal);
});

额外注意 #

• 模块引入受同源策略限制，本地直接打开HTML（file://协议）可能触发CORS错误，建议用本地服务器运行（比如VS Code的Live Server插件）。

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