React搭配Node报Cannot use import statement outside a module错误

DevOps 小满

2026-8-27

问题根因

所有报错的核心原因非常明确：你直接把create-react-app（简称CRA）生成的React源码文件，当做浏览器可直接运行的静态文件引入，完全跳过了React项目必须的编译打包流程。
CRA生成的index.js里包含两类浏览器/Node原生无法识别的语法：一类是ES Module的import导入语法，另一类是JSX语法（也就是代码里<App />、<React.StrictMode>这类写在JS里的类HTML标签）。这类源码必须经过react-scripts内置的构建工具转译成普通ES5语法的JS文件，才能在浏览器中正常运行。你之前尝试的加type:module配置、改.mjs后缀、给script标签加module属性，全是在试图让原生运行环境直接执行未编译的源码，方向完全错误，不可能解决问题。
你提到React单独运行无异常，本质是单独运行时执行的是react-scripts start命令，这个命令会在后台自动完成源码编译，把转译后的普通JS返回给浏览器；当你把React代码嵌入旧Node模板时，完全没走这个编译流程，自然会连续触发报错。

之前方案失效的具体原因

对应你试过的几个方案，逐一说明问题：

直接引入源码报Cannot use import statement outside a module：浏览器默认将普通script标签内的JS识别为传统脚本，原生不支持import语法，报错符合预期。
根目录package.json加"type": "module"后报require is not defined：该配置是Node.js服务端的模块规则配置，生效后会把项目内所有.js文件都识别为ES模块，你使用的旧MEAN模板里数百个用require写的CommonJS语法代码会直接失效，这个方案本身就不适合老项目改造场景，改造成本极高完全没必要。
script标签加type="module"后报Unexpected token '<'：加module属性后浏览器确实能识别import语法，但依然无法解析JSX语法，你代码第9行就是<React.StrictMode>写法，浏览器看到<会默认识别为HTML标签，直接抛出语法错误。
把文件后缀改成.mjs依然报错：本质和上一个问题一致，只是解决了import语法的识别问题，依然无法处理JSX、依赖路径解析等打包环节才会解决的问题。

低成本改造方案

不需要修改旧模板里任何require语法的代码，改动量极小，按以下步骤操作即可：

不要把React项目直接装在public目录下，将整个CRA生成的React项目移动到项目根目录下单独的client文件夹，和原有服务端代码、public文件夹平级，前后端代码不要混放。
如果你的Node服务默认占用3000端口，就在client文件夹下新建.env文件，写入PORT=3001，让React开发服务跑在3001端口避免冲突；同时打开React目录下CRA自动生成的package.json，添加"proxy": "http://localhost:3000"配置，开发环境下React的接口请求会自动转发到Node服务，无需额外处理跨域。

修改根目录旧项目的package.json，保留原有所有脚本和依赖不动，只新增两个命令：

"scripts": {
  // 原有所有脚本配置完全保留，新增以下两行
  "client": "npm start --prefix client",
  "dev": "gulp & npm run client"
}

开发阶段直接执行npm run dev，会同时启动原有gulp驱动的Node服务、React自带的开发服务，两边独立运行互不干扰，开发体验和你单独跑React、单独跑Node完全一致。
上线部署时，先进入client目录执行npm run build，命令会自动把React源码编译成浏览器可直接运行的纯静态文件，输出到client/build目录。之后只需要在原有Express服务的路由配置最后，加几行静态资源托管逻辑即可，原有接口逻辑完全不需要改动：
```
// 注意这行要放在所有后端接口路由的后面
const path = require('path');
app.use(express.static(path.join(__dirname, 'client', 'build')));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
});
```

避坑提示

绝对不要在根目录的package.json里加"type": "module"配置，原有CommonJS规范的服务端代码不需要做任何语法修改，完全不影响和React配合。
不要在HTML模板里直接引入React源码目录下的任何js、css文件，这些都是未编译的源码，浏览器无法直接运行。开发环境用React自带的开发服务访问，上线时引入build目录编译后的静态文件即可。
原有的gulp构建流程、服务端业务逻辑完全不需要调整，React部分单独维护、单独打包，两边完全解耦，后续升级也不会互相影响。

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