无法导入JS模块，触发SyntaxError: Cannot use import statement outside a module错误

1. 移除HTML中重复引入的模块脚本 #

你的HTML里同时引入了main.js和module.js，但main.js已经通过import加载了module.js，重复引入会导致冲突。保留带有defer的main.js标签即可：

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

2. 补全import路径的.js后缀 #

浏览器的ES模块导入要求使用完整的文件扩展名，修改main.js里的导入语句：

// 原代码
import checkCashRegister from "./module";
// 修改后
import checkCashRegister from "./module.js";

3. 用本地服务器运行项目，不要直接打开HTML文件 #

如果直接双击打开HTML（使用file://协议），浏览器会因为跨域安全策略阻止模块加载。可以用以下方式启动本地服务器：

• 用VS Code的Live Server插件
• 用Node.js的http-server工具（先全局安装：npm install -g http-server，然后在项目根目录运行http-server）
  访问http://localhost:xxxx开头的地址即可正常加载模块。

4. 区分浏览器和Node.js的模块语法 #

你提到使用Node.js v16，但当前是浏览器端的模块场景，Node.js的require、module.exports或者package.json里的"type": "module"配置只对Node.js环境生效，浏览器端要严格使用ES模块的import/export语法，不要混用两种环境的写法。

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