CLI: Add webpack4/5 detection

lib/cli/src/detect.ts

@@ -13,7 +13,7 @@ import {
   CoreBuilder,
 } from './project_types';
 import { getBowerJson, paddedLog } from './helpers';
-import { PackageJson, readPackageJson } from './js-package-manager';
+import { PackageJson, readPackageJson, JsPackageManager } from './js-package-manager';
 
 const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
 
@@ -104,14 +104,41 @@ export function detectFrameworkPreset(packageJson = {}) {
  *
  * @returns CoreBuilder
  */
-export function detectBuilder() {
+export function detectBuilder(packageManager: JsPackageManager) {
   const viteConfig = findUp.sync(viteConfigFiles);
 
   if (viteConfig) {
     paddedLog('Detected vite project, setting builder to @storybook/builder-vite');
     return CoreBuilder.Vite;
   }
 
+  try {
+    let out = '';
+    if (packageManager.type === 'npm') {
+      try {
+        // npm <= v7
+        out = packageManager.executeCommand('npm', ['ls', 'webpack']);
+      } catch (e2) {
+        // npm >= v8
+        out = packageManager.executeCommand('npm', ['why', 'webpack']);
+      }
+    } else {
+      out = packageManager.executeCommand('yarn', ['why', 'webpack']);
+    }
+
+    // if the user has BOTH webpack 4 and 5 installed already, we'll pick the safest options (4)
+    if (out.includes('webpack@4') || out.includes('webpack@npm:4')) {
+      return CoreBuilder.Webpack5;
+    }
+
+    // the user has webpack 4 installed, but not 5
+    if (out.includes('webpack@5') || out.includes('webpack@npm:5')) {
+      return CoreBuilder.Webpack5;
+    }
+  } catch (err) {
+    //
+  }
+
   // Fallback to webpack4
   return CoreBuilder.Webpack4;
 }

lib/cli/src/generators/VUE3/index.ts

@@ -1,10 +1,7 @@
 import { baseGenerator, Generator } from '../baseGenerator';
-import { CoreBuilder } from '../../project_types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  const updatedOptions = { ...options, builder: CoreBuilder.Webpack5 };
-
-  baseGenerator(packageManager, npmOptions, updatedOptions, 'vue3', {
+  baseGenerator(packageManager, npmOptions, options, 'vue3', {
     extraPackages: ['vue-loader@^16.0.0'],
   });
 };

lib/cli/src/generators/baseGenerator.ts

@@ -49,7 +49,7 @@ const defaultOptions: FrameworkOptions = {
 const builderDependencies = (builder: Builder) => {
   switch (builder) {
     case CoreBuilder.Webpack4:
-      return [];
+      return ['@storybook/builder-webpack4', '@storybook/manager-webpack4'];
     case CoreBuilder.Webpack5:
       return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
     case CoreBuilder.Vite:

lib/cli/src/initiate.ts

@@ -57,7 +57,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
 
   const generatorOptions = {
     language,
-    builder: options.builder || detectBuilder(),
+    builder: options.builder || detectBuilder(packageManager),
     linkable: !!options.linkable,
     commonJs: options.commonJs,
   };