javascript - Storybook build using vite: ReferenceError: require is not defined - Stack Overflow

admin管理员组

文章数量:1122832

I'm using Storybook and Vite to build the components. On prod I'm getting this error:

ReferenceError: require is not defined

So I build the project on local and started serving this using http-server. Thus, I'm able to re-produce this on local as well.

I tried adding

import commonjs from 'vite-plugin-commonjs';

into the plugins

But it didn't resolve.

Here's my vite.config

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';
// /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: tsConfigpilerOptions.baseUrl,
          paths: tsConfigpilerOptions.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',
        },
      },
    },
  };
});

As the source of error seems to be $i=require("./source.json") line in one of the preview files generated by storybook, I can't modify it to import for e.g.

本文标签： javascriptStorybook build using vite ReferenceError require is not definedStack Overflow