React+SpringBoot项目启动报Cannot use import statement outside a module错误

问题根因 #

当前报错和你配置的ES模块参数无关，核心是启动逻辑错误：

• React的.js组件文件包含JSX语法、静态资源（svg、css）导入逻辑，只能经过React官方编译工具（如create-react-app内置的react-scripts、Vite）处理后才能运行，你直接用node命令执行React组件文件，Node原生环境不支持这类前端专属语法和资源导入规则，必然触发报错。
• 你在根目录package.json添加的"type": "module"配置，仅对根目录及同级路径下的JS文件生效，你执行的文件在frontend/src路径下，若frontend目录没有独立的package.json，根目录的模块配置不会对该文件生效，即便生效也解决不了JSX无法识别的核心问题。

具体修复步骤 #

• 首先确认你的前端代码是否是用create-react-app/Vite等标准React脚手架初始化的，正常初始化的前端项目frontend目录下会有独立的package.json，里面已经内置了正确的启动命令，你需要先进入frontend目录执行npm install安装所有前端依赖，不要只在根目录安装前端相关依赖。
• 修正根目录package.json的启动脚本，将原来直接调用node的配置替换为调用前端脚手架的启动命令：

{
  "scripts": {
    "test": "Jest",
    "start": "cd frontend && npm start"
  }
}

• 配置完成后回到项目根目录执行npm start即可正常启动React前端服务，SpringBoot后端服务单独启动即可完成前后端联调。

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