React+Vite项目构建后报错：require is not defined（开发环境正常）

DevOps 小满

2026-8-5

定位问题包与修复方案

一、先定位哪个包在搞事情

1. 查构建产物

直接去dist文件夹里搜require(关键词，找到出现这个代码的文件，顺着代码里的包标识（比如require('xxx')里的xxx）锁定可疑包。
或者用浏览器开发者工具的报错栈，看调用栈里的第三方包名称，直接定位。

2. 排查依赖

先试试移除近期新增的小众/老版本包，重新构建预览，看问题是否消失，快速锁定嫌疑目标。
用npm explain <包名>或pnpm why <包名>查看包的依赖链，确认是否是间接依赖引入了CommonJS代码。

二、具体修复方案

方案1：强制Vite转译可疑包

在vite.config.js里配置，让Vite专门处理这个包：

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

export default defineConfig({
  plugins: [react()],
  // 先尝试这个配置
  optimizeDeps: {
    include: ['可疑包名'] // 替换成你找到的包名
  },
  // 如果上面不行，加这个build配置
  build: {
    commonjsOptions: {
      include: [/可疑包名/, /node_modules/]
    }
  }
})

方案2：换兼容的包

如果某个包确实是老CommonJS格式且Vite转译无效，找功能类似的ES模块版本替代，比如带-es后缀的包或者同类替代库。

方案3：正确配置vite-require插件

之前没生效大概率是配置错了，按这个步骤来：

安装插件：npm install vite-require --save-dev
修改vite.config.js：

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

export default defineConfig({
  plugins: [
    react(),
    viteRequire({
      extensions: ['.js', '.jsx', '.ts', '.tsx'] // 覆盖常用文件后缀
    })
  ]
})

删除dist文件夹，重新执行npm run build和npm run preview。