如何使用 \'@storybook/react\': \'^8.2.9\'、\'@storybook/react-vite\': \'8.2.9\'、\'vite\': \'^4.4.0\'、\'vite-tsconfig-paths\': & 修复此问题

如何使用修复此问题
\'@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\'在开发者控制台的网络选项卡中，我看到了调用：GET http://localhost:6007/virtual:/@storybook/builder-vite/vite-app.js net::ERR_ABORTED 404 (Not Found)

-文件 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;

-文件预览.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>,
];

\'我尝试使用 Vite 运行 Storybook，但遇到 vite-app.js 文件的 404 错误，无法解决。\'