部署网站出现Uncaught ReferenceError: require is not defined错误求解决

问题根源 #

本地开发正常但部署后报错，核心原因是浏览器环境不支持Node.js的require语法，而生产打包后的代码中残留了未转换的require调用。你的项目package.json已设置"type": "module"（ES模块模式），但某个依赖或插件引入了CommonJS规范的代码，导致Vite打包时未完全处理。

解决方案 #

1. 移除冲突插件vite-plugin-require #

你安装的vite-plugin-require用于兼容CommonJS的require，但与Vite的ES模块模式存在冲突，先移除它：

npm uninstall vite-plugin-require

同时检查项目代码，将所有直接使用require的地方替换为ES模块的import语法。

2. 兼容第三方依赖中的CommonJS代码 #

部分第三方依赖（如@canvasjs/react-charts）可能内部仍使用require，可通过vite-plugin-commonjs处理：

npm install vite-plugin-commonjs --save-dev

在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()],
});

3. 优化Vite打包配置 #

调整build.commonjsOptions确保所有node_modules中的CommonJS模块被转换：

export default defineConfig({
  build: {
    commonjsOptions: {
      include: [/node_modules/],
    },
  },
});

4. 本地预演生产构建 #

修改配置后，先在本地模拟生产环境验证：

npm run build
npm run preview

确认无报错后再部署，避免反复线上调试。

内容的提问来源于stack exchange，提问作者Adil Mahmoud Rion