大家好，我目前在用Storybook搭配Vite来构建组件库，但是在生产环境遇到了一个棘手的错误：

ReferenceError: require is not defined

为了排查问题，我在本地构建项目后用http-server启动服务，成功复现了这个报错。

我尝试过的解决方法是在Vite配置中引入并注册vite-plugin-commonjs插件，具体是添加了：

import commonjs from 'vite-plugin-commonjs';

然后把它加入到plugins数组里，但这个方案并没有解决问题。

以下是我的完整vite.config.ts配置：

import { UserConfig, defineConfig } from 'vite';
import { resolve } from 'path';
import react from '@vitejs/plugin-react';
import commonjs from 'vite-plugin-commonjs';
import { visualizer } from 'rollup-plugin-visualizer';
import svgr from 'vite-plugin-svgr';
import dts from 'vite-plugin-dts';
import { libInjectCss } from 'vite-plugin-lib-inject-css';
import tsconfigPaths from 'vite-tsconfig-paths';
import packageJson from './package.json';
import tsConfig from './tsconfig.json';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
// https://vitejs.dev/config/
export default defineConfig((): UserConfig => {
  return {
    plugins: [
      react(),
      commonjs(),
      tsconfigPaths(),
      libInjectCss(),
      visualizer({ filename: 'stats/stats.html' }),
      svgr(),
      dts({
        exclude: [
          '**/*.stories.tsx',
          '**/*.test.tsx',
          '**/*.test.ts',
          '**/*.stories.ts',
          'src/test-utils/**',
          'src/mock/**',
          'src/setupTests.ts',
          '**/*._test.tsx',
        ],
        tsconfigPath: './tsconfig.json',
        compilerOptions: {
          baseUrl: tsConfig.compilerOptions.baseUrl,
          paths: tsConfig.compilerOptions.paths,
        },
      }),
    ],
    build: {
      copyPublicDir: false,
      sourcemap: true,
      emptyOutDir: true,
      lib: {
        entry: resolve(__dirname, 'src/index.ts'),
        formats: ['es'],
        name: 'te-components',
      },
      
      rollupOptions: {
        plugins: [
          peerDepsExternal({ includeDependencies: true }),
          nodeResolve({
            mainFields: ['module', 'main', 'browser'],
            extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
          }),
        ],
        external: [
          ...Object.keys(packageJson.dependencies),
          ...Object.keys(packageJson.peerDependencies),
          'react/jsx-runtime',
          '@babel/runtime',
          'prop-types',
          'lodash',
          '@mui/system',
          '@mui/material',
          '@mui/icons-material',
        ],
        output: {
          assetFileNames: 'assets/[name][extname]',
          entryFileNames: '[name].js',
          chunkFileNames: '[name].js',
          preserveModules: true,
          preserveModulesRoot: 'src',
        },
      },
    },
    optimizeDeps: {
      include: ['vite-plugin-commonjs'], // List the packages here
      esbuildOptions: {
        // Ensure that require statements are transformed for ES modules
        loader: {
          '.js': 'jsx',
        },
      },
    },
  };
});

从报错截图可以看到，问题的根源是Storybook生成的某个预览文件里的$i=require("./source.json")这一行，我没办法直接修改这个文件把require改成import语法，所以想请教大家有没有其他解决思路？

备注：内容来源于stack exchange，提问作者ABGR