[Bug] :Storybook + vite shows "No Preview" but story still renders below

[dankurfirst]

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.

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