Vite & React构建后报错：Uncaught ReferenceError: require is not defined

使用Vite + React构建项目，npm run dev运行正常，但npm run build后用Five Server打开生成的HTML文件，页面无内容，控制台报错：

Uncaught ReferenceError: require is not defined
    at index-079d3293.js:156:35879
    at index-079d3293.js:1:23
    at index-079d3293.js:180:36233

排查发现构建后的JS文件以模块形式引入，但内部包含require()语句。尝试移除<script>标签的type="module"属性，但文件存在export语句，此方法无效。

生成的HTML文件 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script type="module" crossorigin src="/assets/index-079d3293.js"></script>
    <link rel="stylesheet" href="/assets/index-45f2eabe.css">
  </head>
  <body>
    <div id="root"></div>
    
  </body>
</html>

package.json #

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.17",
    "@reduxjs/toolkit": "^1.9.5",
    "react": "^18.2.0",
    "react-chat-engine-advanced": "^0.1.28",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.11.0"
  },
  "devDependencies": {
    "@types/node": "^18.16.3",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "sass": "^1.62.1",
    "vite": "^4.3.2"
  }
}

vite.config.js #

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{find: '@', replacement: path.resolve(__dirname, 'src')}]
  }
})

问题根源是react-chat-engine-advanced依赖采用CommonJS格式编写，Vite默认将构建产物处理为ES模块，导致模块文件中保留了浏览器不支持的require语句。

方法一：强制预构建依赖 #

修改vite.config.js，添加optimizeDeps配置强制将该依赖转换为ES模块：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{find: '@', replacement: path.resolve(__dirname, 'src')}]
  },
  optimizeDeps: {
    include: ['react-chat-engine-advanced']
  }
})

执行以下命令清理缓存并重新构建：

rm -rf node_modules/.vite
npm run build

构建完成后建议使用vite preview预览产物，Five Server可能无法正确处理静态资源路径。

方法二：强制SSR外部化处理 #

如果方法一无效，可添加ssr配置强制将该依赖视为CommonJS处理：

export default defineConfig({
  // ...其他配置
  ssr: {
    noExternal: ['react-chat-engine-advanced']
  }
})

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