Merge pull request #29710 from storybookjs/yann/support-vite-6

Frameworks: Add Vite 6 support

code/addons/test/src/vitest-plugin/index.ts

@@ -108,9 +108,18 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         config.test.browser.screenshotFailures ??= false;
       }
 
+      // copying straight from https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts#L60
+      // to avoid having to maintain Vite as a dependency just for this
+      const viteDefaultClientConditions = ['module', 'browser', 'development|production'];
+
       config.resolve ??= {};
       config.resolve.conditions ??= [];
-      config.resolve.conditions.push('storybook', 'stories', 'test');
+      config.resolve.conditions.push(
+        'storybook',
+        'stories',
+        'test',
+        ...viteDefaultClientConditions
+      );
 
       config.test.setupFiles ??= [];
       if (typeof config.test.setupFiles === 'string') {

code/builders/builder-vite/package.json

@@ -61,7 +61,7 @@
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "publishConfig": {
     "access": "public"

code/builders/builder-vite/src/vite-config.test.ts

@@ -10,6 +10,7 @@ import { commonConfig } from './vite-config';
 vi.mock('vite', async (importOriginal) => ({
   ...(await importOriginal<typeof import('vite')>()),
   loadConfigFromFile: vi.fn(async () => ({})),
+  defaultClientConditions: undefined,
 }));
 const loadConfigFromFileMock = vi.mocked(loadConfigFromFile);
 

code/builders/builder-vite/src/vite-config.ts

@@ -47,7 +47,9 @@ export async function commonConfig(
   _type: PluginConfigType
 ): Promise<ViteInlineConfig> {
   const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
-  const { loadConfigFromFile, mergeConfig } = await import('vite');
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore this property only exists in Vite 6
+  const { loadConfigFromFile, mergeConfig, defaultClientConditions = [] } = await import('vite');
 
   const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
 
@@ -67,7 +69,7 @@ export async function commonConfig(
     base: './',
     plugins: await pluginConfig(options),
     resolve: {
-      conditions: ['storybook', 'stories', 'test'],
+      conditions: ['storybook', 'stories', 'test', ...defaultClientConditions],
       preserveSymlinks: isPreservingSymlinks(),
       alias: {
         assert: require.resolve('browser-assert'),

code/frameworks/experimental-nextjs-vite/package.json

@@ -112,7 +112,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0 || ^6.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

code/frameworks/react-native-web-vite/package.json

@@ -69,7 +69,7 @@
     "react-native": ">=0.74.5",
     "react-native-web": "^0.19.12",
     "storybook": "workspace:^",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

code/frameworks/react-vite/package.json

@@ -66,7 +66,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

code/frameworks/svelte-vite/package.json

@@ -67,7 +67,7 @@
     "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0",
     "storybook": "workspace:^",
     "svelte": "^4.0.0 || ^5.0.0",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

code/frameworks/sveltekit/package.json

@@ -71,7 +71,7 @@
   "peerDependencies": {
     "storybook": "workspace:^",
     "svelte": "^4.0.0 || ^5.0.0",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

code/frameworks/vue3-vite/package.json

@@ -68,7 +68,7 @@
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

code/yarn.lock

@@ -6172,7 +6172,7 @@ __metadata:
     vite: "npm:^4.0.4"
   peerDependencies:
     storybook: "workspace:^"
-    vite: ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
   languageName: unknown
   linkType: soft
 
@@ -6658,7 +6658,7 @@ __metadata:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     storybook: "workspace:^"
-    vite: ^5.0.0
+    vite: ^5.0.0 || ^6.0.0
   dependenciesMeta:
     sharp:
       optional: true
@@ -7112,7 +7112,7 @@ __metadata:
     react-native: ">=0.74.5"
     react-native-web: ^0.19.12
     storybook: "workspace:^"
-    vite: ^5.0.0
+    vite: ^5.0.0 || ^6.0.0
   languageName: unknown
   linkType: soft
 
@@ -7136,7 +7136,7 @@ __metadata:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     storybook: "workspace:^"
-    vite: ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
   languageName: unknown
   linkType: soft
 
@@ -7433,7 +7433,7 @@ __metadata:
     "@sveltejs/vite-plugin-svelte": ^2.0.0 || ^3.0.0 || ^4.0.0
     storybook: "workspace:^"
     svelte: ^4.0.0 || ^5.0.0
-    vite: ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
   languageName: unknown
   linkType: soft
 
@@ -7492,7 +7492,7 @@ __metadata:
   peerDependencies:
     storybook: "workspace:^"
     svelte: ^4.0.0 || ^5.0.0
-    vite: ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
   languageName: unknown
   linkType: soft
 
@@ -7587,7 +7587,7 @@ __metadata:
     vue-docgen-api: "npm:^4.75.1"
   peerDependencies:
     storybook: "workspace:^"
-    vite: ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
   languageName: unknown
   linkType: soft