Vite构建报错[commonjs--resolver]：无法解析包入口求解决方案

问题场景 #

我项目中node_modules里的某个包的package.json配置如下：

{
  "sideEffects": false,
  "module": "./index.js",
  "main": "../node/{moduleName}/index.js",
  "types": "./index.d.ts"
}

使用Vite构建时抛出以下错误：

[commonjs--resolver] Failed to resolve entry for package "/drone/src/node_modules/{module}/core/node_modules/@mui/material/LinearProgress". The package may have incorrect main/module/exports specified in its package.json: ENOENT: no such file or directory, lstat '/drone/src/node_modules/{module}/core/node_modules/@mui/material/LinearProgress/index.js'
error during build:

我的Vite配置文件内容：

import { defineConfig } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';

export default defineConfig({
  build: {
    assetsInlineLimit: 2048,
    rollupOptions: {
      external: ['react', 'react-dom'],
      output:{
        globals: {
          react: 'React',
          'react-dom': 'ReactDom'
        },
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },
  plugins: [RubyPlugin()],
});

由于无法修改该第三方包的package.json，需要找到替代方案解决这个构建错误。

解决方案 #

方法1：用Vite的resolve.alias强制映射正确入口 #

直接给有问题的包配置别名，指定它实际存在的文件路径。假设该包的正确入口是./dist/index.js（根据你的项目实际路径调整），修改Vite配置：

import { defineConfig } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      // 替换成实际有问题的包名和正确的文件路径
      '@mui/material/LinearProgress': path.resolve(
        __dirname,
        'node_modules/{module}/core/node_modules/@mui/material/LinearProgress/dist/index.js'
      ),
    },
  },
  build: {
    assetsInlineLimit: 2048,
    rollupOptions: {
      external: ['react', 'react-dom'],
      output:{
        globals: {
          react: 'React',
          'react-dom': 'ReactDom'
        },
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },
  plugins: [RubyPlugin()],
});

方法2：调整resolve.mainFields优先级 #

如果这个包的module字段路径是正确的，直接让Vite优先读取module字段而非错误的main字段。修改配置：

import { defineConfig } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';

export default defineConfig({
  resolve: {
    // 优先使用module字段，再读取main
    mainFields: ['module', 'main'],
  },
  build: {
    assetsInlineLimit: 2048,
    rollupOptions: {
      external: ['react', 'react-dom'],
      output:{
        globals: {
          react: 'React',
          'react-dom': 'ReactDom'
        },
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },
  plugins: [RubyPlugin()],
});

方法3：用Rollup插件动态修正package.json #

写个自定义Rollup插件，在构建过程中临时修正目标包的package.json内容，不需要修改本地文件：

import { defineConfig } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';
import fs from 'fs';
import path from 'path';

// 自定义插件：动态修正目标包的package.json
function fixPackageJson() {
  return {
    name: 'fix-package-json',
    async resolveId(source) {
      if (source.includes('@mui/material/LinearProgress')) {
        const pkgPath = path.resolve(
          __dirname,
          'node_modules/{module}/core/node_modules/@mui/material/LinearProgress/package.json'
        );
        const pkgContent = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
        // 把main字段修正为正确的路径
        pkgContent.main = './index.js'; // 替换成实际正确的路径
        // 临时生成修正后的package.json到构建流程中
        this.emitFile({
          type: 'asset',
          fileName: 'node_modules/@mui/material/LinearProgress/package.json',
          source: JSON.stringify(pkgContent, null, 2),
        });
      }
    },
  };
}

export default defineConfig({
  plugins: [RubyPlugin(), fixPackageJson()],
  build: {
    assetsInlineLimit: 2048,
    rollupOptions: {
      external: ['react', 'react-dom'],
      output:{
        globals: {
          react: 'React',
          'react-dom': 'ReactDom'
        },
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },
});

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