Repository: storybook
Issue: [Bug] :Storybook + vite shows "No Preview" but story still renders below
Labels: bug

### What version of `vite` are you using?

5.2.10

### System info and storybook versions

Storybook Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/Library/Caches/fnm_multishells/49376_1714407388493/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/47960_1714407276778/bin/yarn
    npm: 10.1.0 - ~/Library/Caches/fnm_multishells/49376_1714407388493/bin/npm <----- active
    pnpm: 8.6.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.91
    Safari: 16.4
  npmPackages:
    @storybook/addon-essentials: ^8.0.9 => 8.0.9 
    @storybook/addon-interactions: ^8.0.9 => 8.0.9 
    @storybook/addon-links: ^8.0.9 => 8.0.9 
    @storybook/addon-onboarding: ^8.0.9 => 8.0.9 
    @storybook/blocks: ^8.0.9 => 8.0.9 
    @storybook/react: ^8.0.9 => 8.0.9 
    @storybook/react-vite: ^8.0.9 => 8.0.9 
    @storybook/test: ^8.0.9 => 8.0.9 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.0.9 => 8.0.9 

### Describe the Bug

After migrating from CRA to vite, all stories show a "No preview Available" message above the rendered story, as in the screenshot. 


<img width="1096" alt="Screenshot 2024-04-29 at 2 48 50 PM" src="https://github.com/storybookjs/builder-vite/assets/49764589/8c660928-b86b-42b6-adfa-0e4d8a856653">

 ./storybook/main.ts
```
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

	addons: [
		'@storybook/addon-links',
		'@storybook/addon-essentials',
		'@storybook/addon-a11y',
		'@storybook/addon-jest',
		'@chromatic-com/storybook'
	],
	framework: {
		name: '@storybook/react-vite',
		options: {}
	},
	docs: {
		autodocs: true
	
}
}

export default config;

```

/./storybook/preview.ts
```
import type { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;


```

vite.config.js
```

import react from '@vitejs/plugin-react-swc';
import path from 'path';
import { defineConfig } from 'vitest/config';
import svgrPlugin from 'vite-plugin-svgr';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import { globSync } from 'glob';
import commonjs from 'vite-plugin-commonjs'

export default defineConfig(({ mode }) => ({
	plugins: [react(), viteTsconfigPaths(), svgrPlugin(), commonjs()],
	build: {
		commonjsOptions: { transformMixedEsModules: true },
		cssCodeSplit: true,
		lib: { 
			entry: [...globSync('./src/**/*.entrypoint.tsx')],
			formats: ['es'],
		},
		outDir: '../react-frontend/build',
		manifest: true,
	},
	resolve: {
		alias: {
			lib: path.resolve(__dirname, './src/lib'),
		},
	},
	test: {
		globals: true,
		environment: 'jsdom',
		setupFiles: ['./vitest-setup.ts']
	},
	define: {
		'process.env': JSON.stringify({ 
			...import.meta.env,
			NODE_ENV: mode,
		}),
	},
}));

```





### Link to Minimal Reproducible Example

_No response_

### Participation

- [ ] I am willing to submit a pull request for this issue.