如何修复Vite构建第三方依赖时出现的Unexpected token错误

安全阿岳

2026-8-28

问题根因

报错是三个配置错误叠加导致的：

你给Rollup生产构建强制设置了输出格式为cjs，但react-router-dom@6.x本身是纯ES Module格式的第三方依赖，Rollup在CJS输出模式下解析ESM导入语法时直接触发解析失败，报错位置指到文件开头注释是解析器位置偏移导致的，实际出错点是后面的ESM import语句。
重复注册polyfillNode插件，插件在开发服务器启动阶段就提前执行，干扰了Vite默认的esbuild依赖预构建、CommonJS/ESM自动转换流程。
polyfill相关配置存在冲突：你手动配置的alias指向rollup-plugin-node-polyfills包的路径，但项目里实际安装的是rollup-plugin-polyfill-node，两个包名不一致，手动配置的alias完全不生效，还会打乱正常的模块解析逻辑。

修复步骤

第一步：清理错误的基础构建配置
打开vite.config.ts做以下修改：
1. 删掉顶层plugins数组里的polyfillNode()，这个插件只需要在Rollup生产构建阶段注册一次即可。
2. 删掉build.rollupOptions.output里的format: 'cjs'配置，浏览器端产物默认使用es模块格式即可，CJS是Node.js环境专用的模块格式，不适合浏览器场景。
3. 扩展commonjsOptions的转换范围，确保node_modules下的ESM格式依赖能被正常转译。
  修改后对应配置段参考：
```
plugins: [react()],
// ...其余配置保留
build: {
    commonjsOptions: {
        transformMixedEsModules: true,
        include: [/node_modules/, /react-router-dom/],
    },
    rollupOptions: {
        output: {
            dir: 'output',
        },
        plugins: [
            polyfillNode(),
        ],
    },
}
```
第二步：清理冲突的polyfill配置
1. 删掉resolve.alias里所有手动配置的Node核心模块polyfill映射（util、events、stream、path、zlib这几行），rollup-plugin-polyfill-node会自动处理这些模块的浏览器端映射，不需要手动配置。
2. 删掉define段里手动写的global: {}、process: { env: { HOME: './src' } }配置，这部分全局变量注入交给polyfill插件自动处理即可，手动配置会和插件逻辑冲突。
第三步：清缓存重新构建
之前的错误构建会生成预构建缓存，执行以下命令清理后重新构建即可：
```
rm -rf node_modules/.vite
rm -rf output
npm run build
```

额外排查点

如果执行完上述步骤还是报模块解析错误，把dependencies里手动安装的stream、zlib、util、events这几个和Node核心模块重名的依赖删掉即可，这些包会覆盖polyfill插件提供的浏览器端实现，干扰模块解析。
开发环境能正常运行是因为Vite开发阶段用esbuild做依赖转换，容错率比生产阶段的Rollup更高，且不会读取Rollup专属的输出格式配置，所以配置问题不会在开发阶段暴露。

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