Node.js前端项目Cannot use import statement outside a module报错求助

问题根因 #

报错的本质是浏览器直接加载了未经过webpack打包的ES Module源码文件，package.json 中的 "type": "module" 配置仅对Node.js执行环境生效，无法作用于浏览器端的JS文件加载逻辑。

解决步骤 #

1. 修正HTML中的JS文件引用路径
   你当前在HTML中直接引用了源码目录的未打包文件：

<script src="/src/SharePlace.js" defer></script>

结合你的webpack配置，打包后的输出文件会存放在 dist/assets/scripts/SharePlace.js，且devServer的服务根目录指向./dist，所以需要将引用路径修改为：

<script src="assets/scripts/SharePlace.js" defer></script>

2. 优化导入路径避免报错
   你在SharePlace.js中的modal导入路径存在冗余，容易引发路径解析错误：
   原写法：

import {modal} from '../src/UI/modal';

由于SharePlace.js本身就存放在src目录下，相对路径可以直接简化为：

import {modal} from './UI/modal';

3. 使用正确的方式启动项目
   不要直接打开本地的HTML文件运行项目，需要通过webpack-dev-server启动本地服务，执行对应的启动命令（通常为npm start或者npx webpack serve），webpack会自动完成源码打包、启动服务的流程。

完成以上操作后即可解决当前的导入报错问题，如果后续仍有异常，可以检查webpack打包过程中是否抛出路径解析、模块导出相关的错误提示，逐一排查即可。

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