CommonJS格式的依赖的依赖在Vite打包ESM项目时失败

问题核心 #

你的场景是：React+Vite项目（全ES6模块规范，type: "module"）引入私有npm的自研模块，该模块依赖CommonJS格式的第三方包（如prop-types、sanitize-html）。本地通过file:路径引入时正常，但从私有npm拉取后，Vite无法自动转译这些深层CJS依赖，导致浏览器报导出错误或require is not defined。

解决方案 #

通过Vite的预构建配置强制处理这些依赖，具体配置如下：

1. 强制预构建CJS依赖及自研模块 #

在vite.config.js中配置optimizeDeps.include，将CJS格式的第三方依赖和自研模块纳入Vite的预构建流程，确保Vite把它们转译为ES模块：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: [
      'prop-types', 
      'sanitize-html', 
      '@ourScope/internalDependency' // 你的自研模块
    ]
  }
});

2. 确保依赖入口解析优先级 #

如果部分第三方包同时提供ES和CJS入口，可配置resolve.mainFields让Vite优先选择ES模块入口，减少转译需求：

export default defineConfig({
  // ...其他配置
  resolve: {
    mainFields: ['module', 'main']
  }
});

3. 极端情况：强制转译自研模块 #

如果上述配置仍无效，可将自研模块加入ssr.noExternal（即使不做SSR，该配置也会强制Vite转译目标模块及其依赖）：

export default defineConfig({
  // ...其他配置
  ssr: {
    noExternal: ['@ourScope/internalDependency']
  }
});

原因说明 #

Vite对本地file:路径的依赖会进行全量转译，但对npm安装的依赖默认视为"已处理"的模块，跳过了对其深层CJS依赖的转译。通过optimizeDeps.include强制Vite将这些依赖纳入预构建，就能把CJS格式转换为浏览器兼容的ES模块。

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