how to fix this
i using
“@storybook/react”: “^8.2.9”,
“@storybook/react-vite”: “8.2.9”,
“vite”: “^4.4.0”,
“vite-tsconfig-paths”: “^4.3.1”,
“vitest”: “^1.3.1”
in the network tab in developer console I see the call:
GET http://localhost:6007/virtual:/@storybook/builder-vite/vite-app.js net::ERR_ABORTED 404 (Not Found)
-file main.ts
import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-next',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
],
framework: {
name: '@storybook/react-vite',
options: {},
},
};
export default config;
-file preview.tsx
import '@mantine/core/styles.css';
import React, { useEffect } from 'react';
import { addons } from '@storybook/preview-api';
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
import { MantineProvider, useMantineColorScheme } from '@mantine/core';
import { theme } from '../src/theme';
const channel = addons.getChannel();
function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
const { setColorScheme } = useMantineColorScheme();
const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');
useEffect(() => {
channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
}, [channel]);
return <>{children}</>;
}
export const decorators = [
(renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
(renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
];
“I tried to run Storybook with Vite, but encountered a 404 error for the vite-app.js file, and couldn’t resolve it.”