13:33:44 [vite] Internal server error: Missing “./dist/entry-preview.mjs.js” specifier in “@storybook/react” package

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.”