Storybook-Erstellung mit Vite: ReferenceError: require ist nicht definiert ⇐ JavaScript

[Anonymous]

Ich verwende Storybook und Vite, um die Komponenten zu erstellen. Auf dem Produkt erhalte ich diesen Fehler:

ReferenceError: require is not definiert

Also habe ich das Projekt lokal erstellt und begonnen, es über einen http-Server bereitzustellen. Somit bin ich in der Lage, dies auch vor Ort zu produzieren. Ich bin für jede Hilfe dankbar.
Ich habe versucht, hinzuzufügen

Code: Select all

import commonjs from 'vite-plugin-commonjs';

in die Plugins
Aber es wurde nicht aufgelöst.
Hier ist meine vite.config

Code: Select all

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',
},
},
},
};
});