使用vite preview预览React项目时出现require未定义错误求助

问题场景 #

• 使用环境：Vite 3.0.8、@vitejs/plugin-react 2.0.1、React项目、npm 8.16.0、Node 16.17.0
• 原始Vite配置（vite.config.js）：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build',
  },
})

• 执行vite preview后报错：

Uncaught ReferenceError: require is not defined
at index.aef3ad2c.js:346:199702
at index.aef3ad2c.js:1:142
at index.aef3ad2c.js:368:141758

• 排查细节：错误涉及crypto-js，但npm list crypto-js返回空；已尝试删除node_modules重装、添加@originjs/vite-plugin-commonjs配置（针对react-s3），问题未解决。

问题原因 #

• 隐式依赖的CommonJS模块：crypto-js是react-s3的间接依赖，该依赖未被转译为ES模块，仍保留Node.js的require语法，而浏览器环境原生不支持require。
• 转译范围不全：仅针对react-s3配置esbuildCommonjs，但实际触发问题的是其深层依赖crypto-js，转译未覆盖到该模块。

解决办法 #

方案1：扩展CommonJS转译范围 #

修改vite.config.js，将crypto-js也加入esbuildCommonjs的转译列表，同时确保配置放在optimizeDeps下，让预构建阶段就处理这些依赖：

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import {viteCommonjs, esbuildCommonjs} from '@originjs/vite-plugin-commonjs'

export default defineConfig({
  plugins: [viteCommonjs(), react()],
  build: {
    outDir: 'build',
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [esbuildCommonjs(['react-s3', 'crypto-js'])],
    },
  },
})

方案2：替换兼容ES模块的依赖 #

如果react-s3长期未维护，可替换为支持ES模块的S3操作库（如AWS SDK v3的浏览器版本），从根源避免CommonJS兼容问题。

方案3：临时添加require polyfill（不推荐） #

在项目入口文件（如src/main.jsx）顶部添加代码，模拟Node.js的require行为：

window.require = (module) => import(module)

此方案仅作为临时 workaround，可能引发其他兼容问题，不建议长期使用。

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