为什么React项目后端使用ESM时抛出SyntaxError语法错误？

问题原因 #

你当前的写法会触发报错的核心原因是：Node.js解析.js文件时默认按照CommonJS模块规则处理，会在运行代码前先扫描全局语法，在还没执行到require = require("esm")(module)这行加载esm加载器的代码时，就已经识别到了文件内的import语句，直接抛出CommonJS模块不支持import的语法错误，esm加载器根本没有机会生效。

可行解决方案 #

方案1：拆分入口文件适配esm加载器 #

这个方案可以保留esm依赖的使用，不需要改现有业务代码的模块写法：

1. 新增启动入口文件loader.js，内容如下：

require = require("esm")(module);
module.exports = require("./index.js");

2. 删除原index.js里的require = require("esm")(module);这行代码，保留原有import语句不变
3. 运行启动命令改为node loader.js即可正常加载

方案2：使用Node.js原生ESM支持（无需额外安装esm依赖） #

现在Node.js早已原生支持ES模块，不需要第三方esm包也能运行import/export语法：

1. 在项目根目录的package.json中新增配置项"type": "module"
2. 所有本地模块导入需要补全后缀，比如原import userRoutes from './user'要改为import userRoutes from './user.js'
3. 原有CommonJS的require语法需要全部替换为import写法，直接运行node index.js即可

方案3：修改文件后缀 #

直接把原index.js的后缀改为.mjs，Node.js会默认将.mjs文件识别为ES模块，不需要修改package.json也不需要esm依赖，直接运行node index.mjs即可。

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