heft-storybook-plugin prevents "heft start" from launching Webpack

Author: octogonz

build-tests-samples/heft-storybook-react-tutorial-storybook/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "Storybook build dependencies for heft-storybook-react-tutorial",
   "scripts": {
-    "test": ""
+    "build": ""
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",

build-tests-samples/heft-storybook-react-tutorial/.vscode/launch.json

@@ -7,10 +7,10 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "Debug Jest tests",
+      "name": "Debug \"heft start\"",
       "program": "${workspaceFolder}/node_modules/@rushstack/heft/lib/start.js",
       "cwd": "${workspaceFolder}",
-      "args": ["--debug", "test", "--clean"],
+      "args": ["--debug", "start"],
       "console": "integratedTerminal",
       "sourceMaps": true
     },

build-tests-samples/heft-storybook-react-tutorial/config/heft.json

@@ -49,10 +49,10 @@
     },
     {
       "plugin": "@rushstack/heft-jest-plugin"
-
-      /**
-       * An optional object that provides additional settings that may be defined by the plugin.
-       */
+      // "options": { }
+    },
+    {
+      "plugin": "@rushstack/heft-storybook-plugin"
       // "options": { }
     }
   ]

common/reviews/api/heft-webpack4-plugin.api.md

@@ -22,7 +22,7 @@ export interface IWebpackBuildStageProperties extends IBuildStageProperties {
 
 // @public (undocumented)
 export interface IWebpackBundleSubstageProperties extends IBundleSubstageProperties {
-    webpackConfiguration?: webpack.Configuration | webpack.Configuration[];
+    webpackConfiguration?: webpack.Configuration | webpack.Configuration[] | null;
 }
 
 // @public (undocumented)

heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts

@@ -1,7 +1,13 @@
 // Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 // See LICENSE in the project root for license information.
 
-import type { HeftConfiguration, HeftSession, IHeftPlugin } from '@rushstack/heft';
+import type {
+  HeftConfiguration,
+  HeftSession,
+  IBuildStageContext,
+  IBundleSubstage,
+  IHeftPlugin
+} from '@rushstack/heft';
 
 const PLUGIN_NAME: string = 'StorybookPlugin';
 
@@ -11,5 +17,17 @@ export class StorybookPlugin implements IHeftPlugin {
   /**
    * Generate typings for Sass files before TypeScript compilation.
    */
-  public apply(heftSession: HeftSession, heftConfiguration: HeftConfiguration): void {}
+  public apply(heftSession: HeftSession, heftConfiguration: HeftConfiguration): void {
+    heftSession.hooks.build.tap(PLUGIN_NAME, (build: IBuildStageContext) => {
+      build.hooks.bundle.tap(PLUGIN_NAME, (bundle: IBundleSubstage) => {
+        bundle.hooks.configureWebpack.tap(
+          { name: PLUGIN_NAME, stage: Number.MAX_SAFE_INTEGER },
+          (webpackConfiguration: unknown) => {
+            // Discard Webpack's configuration to prevent Webpack from running
+            return null;
+          }
+        );
+      });
+    });
+  }
 }

heft-plugins/heft-webpack4-plugin/src/WebpackPlugin.ts

@@ -109,7 +109,8 @@ export class WebpackPlugin implements IHeftPlugin {
     buildProperties: IBuildStageProperties,
     supportsColor: boolean
   ): Promise<void> {
-    const webpackConfiguration: IWebpackConfiguration = bundleSubstageProperties.webpackConfiguration;
+    const webpackConfiguration: IWebpackConfiguration | undefined | null =
+      bundleSubstageProperties.webpackConfiguration;
     if (!webpackConfiguration) {
       return;
     }

heft-plugins/heft-webpack4-plugin/src/shared.ts

@@ -29,8 +29,14 @@ export interface IWebpackBundleSubstageProperties extends IBundleSubstagePropert
    * for Webpack to run. If webpackConfigFilePath is specified,
    * this will be populated automatically with the exports of the
    * config file referenced in that property.
+   *
+   * @remarks
+   * Tapable event handlers can return `null` instead of `undefined` to suppress
+   * other handlers from creating a configuration object.
    */
-  webpackConfiguration?: webpack.Configuration | webpack.Configuration[];
+  // We are inheriting this problem from Tapable's API
+  // eslint-disable-next-line @rushstack/no-new-null
+  webpackConfiguration?: webpack.Configuration | webpack.Configuration[] | null;
 }
 
 /**