Vite构建React应用报错Uncaught ReferenceError: require is not defined

我用Vite构建React应用，构建成功但浏览器运行时抛出错误：

Uncaught ReferenceError: require is not defined

我的源码中并未使用require，经排查错误来自redux-storage包，以下是出错时的vite.config.mts配置文件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';
import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';
import requireTransform from 'vite-plugin-require-transform';

export default defineConfig({
  plugins: [
    requireTransform({}),
    viteCommonjs(),
    react(),
    viteTsconfigPaths(),
    svgrPlugin(),
  ],
  define: {
    'process.env': process.env,
  },
  build: {
    outDir: 'build',
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
      plugins: [esbuildCommonjs(['redux-storage'])],
    },
  },
  server: {
    open: true,
    port: 3000,
  },
});

解决方法 #

通过安装vite-plugin-commonjs并在配置中添加对redux-storage/build-es目录的过滤，成功解决了问题，修改后的核心配置如下：

import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
  plugins: [
    commonjs({
      filter(id) {
        if (id.includes('node_modules/redux-storage/build-es')) {
          return true;
        }
      },
    }),
    // 其他插件
  ],
  // 其他配置项
});

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