Storybook-Erstellung mit Vite: ReferenceError: require ist nicht definiert
Posted: 06 Jan 2025, 05:48
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
in die Plugins
Aber es wurde nicht aufgelöst.
Hier ist meine vite.config
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';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',
},
},
},
};
});