Vite构建报错:Identifier 'require$$0' has already been declared

两个报错属于连锁问题，核心诱因有两点：

1. 初始的require is not defined运行时错误，是依赖中的CommonJS模块未被正确转译导致的——浏览器原生ESM环境不支持CommonJS规范的require语法。
2. 开启transformMixedEsModules: true后的Identifier 'require$$0' has already been declared构建错误，是重复配置CommonJS转译工具导致的：你同时启用了Vite/Rollup内置的@rollup/plugin-commonjs、手动引入的@originjs/vite-plugin-commonjs两个转译插件，二者都会给处理过的CommonJS模块注入require$$x格式的辅助变量；当处理你提到的那个自定义第三方库时（它的index.es.js本身是预打包产物，已经混合了ESM导入和CommonJS转译生成的require$$0变量），两个插件重复注入同名变量就会触发声明冲突。

1. 移除重复的CommonJS转译插件 #

Vite 2.0及以上版本内置的CommonJS转译能力已经完全覆盖@originjs/vite-plugin-commonjs的功能，重复引入只会造成转译冲突，直接删除该插件的引入和注册即可：

plugins: [
  svgr(),
  react(),
  // 移除 viteCommonjs() 这一行
  envCompatible({ prefix: "REACT_APP" }),
  injectHtml(),
  checker({
    typescript: true,
  }),
],

2. 排除不需要重复转译的预编译第三方库 #

报错的自定义库已经提供了ESM入口，且自身产物已经完成过CommonJS依赖转译，不需要被内置CommonJS插件二次处理，将其加入转译排除列表：

build: {
  rollupOptions: {},
  outDir: './build',
  minify: "esbuild",
  target: 'es2015',
  commonjsOptions: {
    transformMixedEsModules: true,
    exclude: [
      'node_modules/some-custom-library/**' // 替换为实际报错的自定义库包名
    ]
  },
}

3. 残留报错处理（可选） #

如果完成前两步后仍存在运行时require is not defined错误，将未被正确转译的CommonJS依赖加入Vite预构建列表，让Vite在预构建阶段提前将其转为标准ESM格式：

// 在defineConfig配置项中添加
optimizeDeps: {
  include: [
    // 填入实际触发require报错的依赖包名，例如
    'object-is',
    'has'
  ]
}

修改配置后先删除node_modules/.vite缓存目录，再重新执行生产构建：

• 重复声明错误会消失：没有重复转译插件、也不会二次处理已经预编译的第三方ESM库，不会再生成重复的require$$x变量
• 运行时require错误会消失：所有CommonJS依赖会被内置插件统一转译为浏览器兼容的ESM格式

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