未捕获的ReferenceError:Vitejs中未定义require

psi*_*nta 7 commonjs reactjs es6-modules vite

我正在尝试使用 vitejs 构建一个 React 应用程序,构建成功,但是当我尝试在浏览器上提供它时,出现此错误

Uncaught ReferenceError: require is not defined
Run Code Online (Sandbox Code Playgroud)

我已经尝试了我得到的所有选项,这是我在源代码中vite.config.mts没有使用的文件require,错误是从名为的包中抛出的redux-storage

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,
  },
});
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

在此输入图像描述

更新:

通过安装vite-plugin-commonjs并将其添加到来修复此问题vite.config.js 基本上将包的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;
        }
      },
    }),
    // Other plugins
  ],
  // Other configurations
});
Run Code Online (Sandbox Code Playgroud)