Merge pull request #25005 from storybookjs/fix-vite5-cjs-warnings

Vite: Fix Vite 5 CJS warnings

code/.eslintrc.js

@@ -39,6 +39,18 @@ module.exports = {
         allowIndexSignaturePropertyAccess: true,
       },
     ],
+    '@typescript-eslint/no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: 'vite',
+            message: 'Please dynamically import from vite instead, to force the use of ESM',
+            allowTypeImports: true,
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     {

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

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import type { Options, Presets } from '@storybook/types';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { loadConfigFromFile } from 'vite';
 import { commonConfig } from './vite-config';
 

code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts

@@ -6,7 +6,6 @@ import svelteDoc from 'sveltedoc-parser';
 import type { SvelteComponentDoc, SvelteParserOptions } from 'sveltedoc-parser';
 import { logger } from '@storybook/node-logger';
 import { preprocess } from 'svelte/compiler';
-import { createFilter } from 'vite';
 import { replace, typescript } from 'svelte-preprocess';
 
 /*
@@ -59,10 +58,12 @@ function getNameFromFilename(filename: string) {
   return base[0].toUpperCase() + base.slice(1);
 }
 
-export function svelteDocgen(svelteOptions: Record<string, any> = {}): PluginOption {
+export async function svelteDocgen(svelteOptions: Record<string, any> = {}): Promise<PluginOption> {
   const cwd = process.cwd();
   const { preprocess: preprocessOptions, logDocgen = false } = svelteOptions;
   const include = /\.(svelte)$/;
+  const { createFilter } = await import('vite');
+
   const filter = createFilter(include);
 
   let docPreprocessOptions: Parameters<typeof preprocess>[1] | undefined;

code/frameworks/svelte-vite/src/preset.ts

@@ -20,7 +20,7 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
   const svelteConfig = await loadSvelteConfig();
 
   // Add docgen plugin
-  plugins.push(svelteDocgen(svelteConfig));
+  plugins.push(await svelteDocgen(svelteConfig));
 
   await handleSvelteKit(plugins, options);
 

code/frameworks/sveltekit/src/plugins/config-overrides.ts

@@ -1,4 +1,4 @@
-import { type Plugin } from 'vite';
+import type { Plugin } from 'vite';
 
 export function configOverrides() {
   return {

code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts

@@ -1,7 +1,7 @@
 import { resolve } from 'node:path';
 import type { Plugin } from 'vite';
 
-export function mockSveltekitStores() {
+export async function mockSveltekitStores() {
   return {
     name: 'storybook:sveltekit-mock-stores',
     config: () => ({

code/frameworks/sveltekit/src/preset.ts

@@ -32,7 +32,7 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
     ])
   )
     .concat(configOverrides())
-    .concat(mockSveltekitStores());
+    .concat(await mockSveltekitStores());
 
   return { ...baseConfig, plugins };
 };

code/frameworks/vue3-vite/src/plugins/vue-docgen.ts

@@ -1,10 +1,10 @@
 import { parse } from 'vue-docgen-api';
 import type { PluginOption } from 'vite';
-import { createFilter } from 'vite';
 import MagicString from 'magic-string';
 
-export function vueDocgen(): PluginOption {
+export async function vueDocgen(): Promise<PluginOption> {
   const include = /\.(vue)$/;
+  const { createFilter } = await import('vite');
   const filter = createFilter(include);
 
   return {

code/frameworks/vue3-vite/src/preset.ts

@@ -1,5 +1,5 @@
 import type { PresetProperty } from '@storybook/types';
-import { mergeConfig, type PluginOption } from 'vite';
+import type { PluginOption } from 'vite';
 import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 import { vueDocgen } from './plugins/vue-docgen';
@@ -16,8 +16,9 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets
   const plugins: PluginOption[] = [];
 
   // Add docgen plugin
-  plugins.push(vueDocgen());
+  plugins.push(await vueDocgen());
 
+  const { mergeConfig } = await import('vite');
   return mergeConfig(config, {
     plugins,
     resolve: {

code/ui/.storybook/main.ts

@@ -1,5 +1,6 @@
 import path from 'path';
 import pluginTurbosnap from 'vite-plugin-turbosnap';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { mergeConfig } from 'vite';
 import type { StorybookConfig } from '../../frameworks/react-vite';
 

scripts/utils/options.ts

@@ -140,11 +140,12 @@ export function getOptions<TOptions extends OptionSpecifier>(
 
       const checkStringValue = (raw: string) => {
         if (option.values && !option.values.includes(raw)) {
-          const possibleOptions = chalk.cyan(option.values.join(', '));
+          const possibleOptions = chalk.cyan(option.values.join('\n'));
           throw new Error(
             dedent`Unexpected value '${chalk.yellow(raw)}' for option '${chalk.magenta(key)}'.
             
-            These are the possible options: ${possibleOptions}\n\n`
+            These are the possible options:
+              ${possibleOptions}\n\n`
           );
         }
         return raw;