fix(storybook): remove webpack from vite and install webpack if npm (#…

…13631)
nrwl · Dec 5, 2022 · 8560453 · 8560453
1 parent ddc2dca
commit 8560453
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 91 deletions.
diff --git a/...es/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap b/...es/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap
@@ -14,20 +14,10 @@ const config: StorybookConfig = {
     '../src/app/**/*.stories.mdx',
     '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: [...(rootMain.addons || []) 
     
     
-  ],
-  webpackFinal: async (config, { configType }: Options) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.ts
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType } as Options);
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
+  ]
 };
 
 module.exports = config;

diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap
@@ -154,20 +154,10 @@ const config: StorybookConfig = {
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: [...(rootMain.addons || []) 
     
     
-  ],
-  webpackFinal: async (config, { configType }: Options) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.ts
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType } as Options);
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
+  ]
 };
 
 module.exports = config;
@@ -213,20 +203,10 @@ const config: StorybookConfig = {
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: [...(rootMain.addons || []) 
     
     
-  ],
-  webpackFinal: async (config, { configType }: Options) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.ts
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType } as Options);
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
+  ]
 };
 
 module.exports = config;
@@ -272,7 +252,7 @@ const config: StorybookConfig = {
     '../components/**/*.stories.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: [...(rootMain.addons || []) 
     
     , 'storybook-addon-swc', 
         {
@@ -282,17 +262,7 @@ const config: StorybookConfig = {
       },
     }
      
-  ],
-  webpackFinal: async (config, { configType }: Options) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.ts
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType } as Options);
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
+  ]
 };
 
 module.exports = config;
@@ -338,20 +308,10 @@ const config: StorybookConfig = {
     '../src/app/**/*.stories.mdx',
     '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: [...(rootMain.addons || []) 
     
     
-  ],
-  webpackFinal: async (config, { configType }: Options) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.ts
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType } as Options);
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
+  ]
 };
 
 module.exports = config;
@@ -397,20 +357,10 @@ const config: StorybookConfig = {
     '../src/app/**/*.stories.mdx',
     '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: [...(rootMain.addons || []) 
     , 'storybook-addon-swc' 
     
-  ],
-  webpackFinal: async (config, { configType }: Options) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.ts
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType } as Options);
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
+  ]
 };
 
 module.exports = config;
@@ -456,20 +406,10 @@ const config: StorybookConfig = {
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: [...(rootMain.addons || []) 
     
     
-  ],
-  webpackFinal: async (config, { configType }: Options) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.ts
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType } as Options);
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
+  ]
 };
 
 module.exports = config;

diff --git a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ b/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__
@@ -13,7 +13,7 @@ const config: StorybookConfig = {
     '../<%= projectDirectory %>/**/*.stories.mdx',
     '../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx)'
   <% } %>],
-  addons: [...(rootMain.addons || []) <% if(uiFramework === '@storybook/react') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>
+  addons: [...(rootMain.addons || []) <% if(uiFramework === '@storybook/react' && !usesVite) { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>
     <% if(usesSwc && !isNextJs) { %>, 'storybook-addon-swc' <% } %>
     <% if(isNextJs) { %>, 'storybook-addon-swc', 
         {
@@ -23,7 +23,7 @@ const config: StorybookConfig = {
       },
     }
      <% } %>
-  ],
+  ]<% if (!usesVite) { %>,
   webpackFinal: async (config, { configType }: Options) => {
     // apply any global webpack configs that might have been specified in .storybook/main.ts
     if (rootMain.webpackFinal) {
@@ -33,7 +33,7 @@ const config: StorybookConfig = {
     // add your own webpack tweaks if needed
 
     return config;
-  },
+  },<% } %>
 };
 
 module.exports = config;
diff --git a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ b/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__
@@ -1,6 +1,6 @@
 <% if (!isRootProject){ %>const rootMain = require('<%= offsetFromRoot %>../.storybook/<%= rootMainName %>');<% } %>
 <% if (isRootProject){ %>const rootMain = require('./main.root');<% } %>
-<% if (existsRootWebpackConfig){ %>const rootWebpackConfig = require('<%= offsetFromRoot %>../.storybook/webpack.config'); <% } %>
+<% if (existsRootWebpackConfig && !usesVite){ %>const rootWebpackConfig = require('<%= offsetFromRoot %>../.storybook/webpack.config'); <% } %>
 <% if (isNextJs){ %>const path = require('path');<% } %>
 
 module.exports = {
@@ -13,7 +13,7 @@ module.exports = {
     '../<%= projectDirectory %>/**/*.stories.mdx',
     '../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx)'
   <% } %>],
-  addons: [...rootMain.addons <% if(uiFramework === '@storybook/react') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>
+  addons: [...rootMain.addons <% if(uiFramework === '@storybook/react' && !usesVite) { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>
     <% if(usesSwc && !isNextJs) { %>, 'storybook-addon-swc' <% } %>
     <% if(isNextJs) { %>, 'storybook-addon-swc', 
         {
@@ -23,7 +23,7 @@ module.exports = {
       },
     }
      <% } %>
-  ],
+  ]<% if (!usesVite) { %>,
   webpackFinal: async (config, { configType }) => {
     // apply any global webpack configs that might have been specified in .storybook/main.js
     if (rootMain.webpackFinal) {
@@ -39,5 +39,5 @@ module.exports = {
     // add your own webpack tweaks if needed
 
     return config;
-  },
+  },<% } %>
 };
diff --git a/packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap b/packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap
@@ -14,6 +14,7 @@ Object {
     "@storybook/core-server": "~6.5.9",
     "@storybook/manager-webpack5": "~6.5.9",
     "existing": "1.0.0",
+    "html-webpack-plugin": "^5.5.0",
     "webpack": "^5.64.0",
   },
   "name": "test-name",

diff --git a/packages/storybook/src/generators/init/init.ts b/packages/storybook/src/generators/init/init.ts
@@ -8,6 +8,7 @@ import {
   updateWorkspaceConfiguration,
 } from '@nrwl/devkit';
 import { isFramework } from '../../utils/utilities';
+
 import {
   babelCoreVersion,
   babelLoaderVersion,
@@ -21,11 +22,13 @@ import {
   urlLoaderVersion,
   viteBuilderVeresion,
   webpack5Version,
+  htmlWebpackPluginVersion,
 } from '../../utils/versions';
 import { Schema } from './schema';
 
 function checkDependenciesInstalled(host: Tree, schema: Schema) {
   const packageJson = readJson(host, 'package.json');
+
   const devDependencies = {};
   const dependencies = {};
   packageJson.dependencies = packageJson.dependencies || {};
@@ -43,6 +46,9 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
     devDependencies['@storybook/manager-webpack5'] = storybookVersion;
   }
 
+  // TODO(katerina): Remove this when Storybook 7.0 is added in Nx
+  devDependencies['html-webpack-plugin'] = htmlWebpackPluginVersion;
+
   if (isFramework('angular', schema)) {
     devDependencies['@storybook/angular'] = storybookVersion;
     devDependencies['webpack'] = webpack5Version;

diff --git a/packages/storybook/src/utils/versions.ts b/packages/storybook/src/utils/versions.ts
@@ -13,3 +13,4 @@ export const storybookSwcAddonVersion = '^1.1.7';
 export const storybookNextAddonVersion = '^1.6.6';
 export const storybookTestRunnerVersion = '^0.7.2';
 export const litHtmlVersion = '^2.3.1';
+export const htmlWebpackPluginVersion = '^5.5.0';