Merge pull request #26330 from storybookjs/jeppe/docs-vite-import

Docs: Use dynamic Vite imports in snippets
storybookjs · Mar 5, 2024 · b314219 · b314219
2 parents 94099bb + 9621341
commit b314219
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/docs/snippets/common/main-config-vite-final-env.js.mdx b/docs/snippets/common/main-config-vite-final-env.js.mdx
@@ -1,14 +1,14 @@
 ```js
 // .storybook/main.js|ts
 
-import { mergeConfig } from 'vite';
-
 export default {
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     builder: '@storybook/builder-vite',
   },
   async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
     if (configType === 'DEVELOPMENT') {
       // Your development configuration goes here
     }

diff --git a/docs/snippets/common/main-config-vite-final.js.mdx b/docs/snippets/common/main-config-vite-final.js.mdx
@@ -1,13 +1,13 @@
 ```js
 // .storybook/main.js
 
-import { mergeConfig } from 'vite';
-
 export default {
   // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
     if (configType === 'DEVELOPMENT') {
       // Your development configuration goes here
     }

diff --git a/docs/snippets/common/main-config-vite-final.ts-4-9.mdx b/docs/snippets/common/main-config-vite-final.ts-4-9.mdx
@@ -4,13 +4,13 @@
 // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
-import { mergeConfig } from 'vite';
-
 const config: StorybookConfig = {
   // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
     if (configType === 'DEVELOPMENT') {
       // Your development configuration goes here
     }

diff --git a/docs/snippets/common/main-config-vite-final.ts.mdx b/docs/snippets/common/main-config-vite-final.ts.mdx
@@ -3,12 +3,13 @@
 
 // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
-import { mergeConfig } from 'vite';
 
 const config = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
     if (configType === 'DEVELOPMENT') {
       // Your development configuration goes here
     }

diff --git a/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx b/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx
@@ -1,8 +1,6 @@
 ```js
 // .storybook/main.js|ts
 
-import { mergeConfig } from 'vite';
-
 export default {
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
@@ -11,6 +9,8 @@ export default {
   },
   async viteFinal(config) {
     // Merge custom configuration into the default config
+    const { mergeConfig } = await import('vite');
+
     return mergeConfig(config, {
       // Add dependencies to pre-optimization
       optimizeDeps: {