首次部署Vite项目遇ERR_MODULE_NOT_FOUND错误求助

问题详情 #

首次部署Vite项目执行npm run build时触发构建错误，提示Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite-plugin-commonjs'。已知vite-plugin-commonjs在构建阶段不被支持，已按照CommonJS官方建议安装@rollup/plugin-commonjs，并配置了vite.config.js和rollup.config.js，但问题仍未解决。

错误日志 #

9:32:18 AM: $ npm run build
9:32:18 AM: > entertainment-app@0.0.0 build
9:32:18 AM: > vite build
9:32:18 AM: failed to load config from /opt/build/repo/vite.config.js
9:32:18 AM: error during build:
9:32:18 AM: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite-plugin-commonjs' imported from /opt/build/repo/vite.config.js.timestamp-1688387538947-29a5bd1b45ad8.mjs
9:32:18 AM:     at new NodeError (node:internal/errors:399:5)
9:32:18 AM:     at packageResolve (node:internal/modules/esm/resolve:889:9)
9:32:18 AM:     at moduleResolve (node:internal/modules/esm/resolve:938:20)
9:32:18 AM:     at defaultResolve (node:internal/modules/esm/resolve:1153:11)
9:32:18 AM:     at nextResolve (node:internal/modules/esm/loader:163:28)
9:32:18 AM:     at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
9:32:18 AM:     at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
9:32:18 AM:     at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
9:32:18 AM:     at link (node:internal/modules/esm/module_job:76:36)
9:32:18 AM: ​
9:32:18 AM: build.command failed 

当前配置文件 #

vite.config.js #

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

export default defineConfig({
  plugins: [react(), commonjs()],
});

rollup.config.js #

import commonjs from "@rollup/plugin-commonjs";

export default {
  input: "src/main.jsx",
  output: {
    dir: "output",
    format: "cjs",
  },
  plugins: [commonjs()],
};

解决步骤 #

1. 修正vite.config.js的插件导入
   错误核心是你安装了@rollup/plugin-commonjs，但配置文件里仍在引用未安装的vite-plugin-commonjs。直接替换导入源：

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react";
   import commonjs from "@rollup/plugin-commonjs";
   
   export default defineConfig({
     plugins: [react(), commonjs()],
   });
   

2. 确认依赖安装
   执行命令确保@rollup/plugin-commonjs已加入开发依赖：

   npm install @rollup/plugin-commonjs --save-dev
   

3. 删除冗余的rollup.config.js
   Vite基于Rollup构建，直接在vite.config.js中配置插件即可，单独的Rollup配置文件不会被Vite读取，删除后可避免混淆。

4. 清理缓存重新构建
   清理Vite缓存后执行构建：

   npm run build -- --clearCache
   

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