[heft] update storybook plugin to be compatible with v9 #5492

UberMouse · 2025-12-09T01:44:34Z

Summary

updates the heft-storybook-plugin to be compatible with storybook v9, this only required adapting to the bin change from an object pointing at different files depending on whether doing a watch/package build, to a single binary file for both
updates the storybook build samples to storybook v9, I mostly did this to try and reproduce an issue at our work rush monorepo around storybook and watch mode, which turned out to be related to the heft-rspack-plugin instead
added support for detecting the --serve flag when using the heft-rspack-plugin via the same method as the webpack plugins

Details

3 is not done correctly, when adding a dependency on the heft-rspack-plugin to import the same types as the heft-webpack plugins I started getting the following typescript errors

ncountered 3 errors
 [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/@[email protected]/node_modules/@rspack/core/dist/builtin-plugin/css-extract/index.d.ts:9:34 - (TS2304) Cannot find name 'HTMLLinkElement'.
 [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected][email protected]/node_modules/webpack-dev-server/types/lib/Server.d.ts:1810:5 - (TS2717) Subsequent property declarations must have the same type.  Property 'devServer' must be of type 'DevServerConfiguration | undefined', but here has type 'DevServerConfiguration | undefined'.
 [build:typescript] /home/taylorl/code/rushstack/heft-plugins/heft-rspack-plugin/dist/heft-rspack-plugin.d.ts:13:10 - (TS2614) Module '"@rspack/core"' has no exported member 'rspackCore'. Did you mean to use 'import rspackCore from "@rspack/core"' instead?

I'm not really sure what is going on there, so I opted to just drop the dependency and work around the missing types. This was enough to generate a patch for our internal Rush monorepo which is what I am after.

How it was tested

Built the storybook sample project

Impacted documentation

I don't think so?

Also adds support for serve mode detection when using the heft-rspack-plugin

iclanton · 2025-12-17T19:27:52Z

build-tests-samples/heft-storybook-react-tutorial/.storybook/main.js

  stories: ['../lib/**/*.stories.js'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials']
+  // naively referencing the name of the package causes storybook to fail to resolve it
+  framework: path.resolve(require.resolve('@storybook/react-webpack5/preset'), '..')


There must be a cleaner way to get the path of the package.

I'm open to suggestions. I don't really understand what is going on here that the normal method of framework: "@storybook/react-webpack5" doesn't work. It fails to resolve the /preset import when storybook tries to import it.

iclanton · 2025-12-17T19:28:26Z

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

-    "lib": ["es5", "scripthost", "es2015.collection", "es2015.promise", "es2015.iterable", "dom"]
+    "target": "es2020",
+    "lib": ["es2020", "scripthost", "dom"],
+    "skipLibCheck": true


What's broken in dependencies?

ncountered 17 errors [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]._kkvcbkhogs6kgmxbas2whdvtne/node_modules/@storybook/react/dist/types-7abe74eb.d.ts:2:29 - (TS7016) Could not find a declaration file for module 'react-dom/client'. '/home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/react-dom@1 [email protected]/node_modules/react-dom/client.js' implicitly has an 'any' type. If the 'react-dom' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom' [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/common/index.d.ts:4:29 - (TS2307) Cannot find module 'node:fs' or its corresponding type declarations. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/common/index.d.ts:5:24 - (TS2307) Cannot find module 'node:buffer' or its corresponding type declarations. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/common/index.d.ts:6:30 - (TS2307) Cannot find module 'node:child_process' or its corresponding type declarations. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/common/index.d.ts:7:44 - (TS2307) Cannot find module 'node:stream' or its corresponding type declarations. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/common/index.d.ts:95:16 - (TS2304) Cannot find name 'BufferEncoding'. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/common/index.d.ts:311:24 - (TS2724) 'NodeJS' has no exported member named 'ProcessEnv'. Did you mean 'Process'? [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/router/index.d.ts:1:24 - (TS2307) Cannot find module 'react' or its corresponding type declarations. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/router/index.d.ts:2:57 - (TS2307) Cannot find module 'react' or its corresponding type declarations. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/theming/index.d.ts:1:26 - (TS2307) Cannot find module 'react' or its corresponding type declarations. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/types/index.d.ts:3:64 - (TS2307) Cannot find module 'react' or its corresponding type declarations. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/types/index.d.ts:9:57 - (TS2307) Cannot find module 'http' or its corresponding type declarations. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/types/index.d.ts:10:36 - (TS2307) Cannot find module 'net' or its corresponding type declarations. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/types/index.d.ts:2236:43 - (TS2339) Property 'hrtime' does not exist on type 'Process'. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/types/index.d.ts:2317:46 - (TS2339) Property 'hrtime' does not exist on type 'Process'. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/types/index.d.ts:2323:46 - (TS2339) Property 'hrtime' does not exist on type 'Process'. [build:typescript] /home/taylorl/code/rushstack/common/temp/default/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/storybook/dist/types/index.d.ts:2328:46 - (TS2339) Property 'hrtime' does not exist on type 'Process'.``` Assuming some node type mismatch, unclear on the react one. Didn't seem that important.

common/config/rush/browser-approved-packages.json

iclanton · 2025-12-17T19:29:25Z

common/config/subspaces/default/common-versions.json

      "^4.1.16"
-    ]
+    ],
+    "@types/react": ["~19.2.7"],


Should we just update the whole repo?

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

UberMouse · 2025-12-18T21:13:03Z

apps/lockfile-explorer-web/tsconfig.json

-  "extends": "./node_modules/local-web-rig/profiles/app/tsconfig-base.json"
+  "extends": "./node_modules/local-web-rig/profiles/app/tsconfig-base.json",
+  "compilerOptions": {
+    "skipLibCheck": true


This is getting errors building in dependencies from some pnpm confusion around the new @types/react package

UberMouse · 2025-12-18T23:04:46Z

hrm storybook v9 requires node v20+ so the node 18 CI matrix fails

iclanton · 2025-12-22T18:48:38Z

@UberMouse - Node 18 entered EOL in April, so it may be okay to remove. @octogonz - will dropping Node 18 break your stuff?

octogonz · 2025-12-23T15:17:50Z

@UberMouse - Node 18 entered EOL in April, so it may be okay to remove. @octogonz - will dropping Node 18 break your stuff?

Yes, we still have some Rush repos that need to build with Node 18. :'(

UberMouse requested review from D4N14L, apostolisms, dmichon-msft, iclanton, octogonz and patmill as code owners December 9, 2025 01:44

github-project-automation bot added this to Bug Triage Dec 9, 2025

github-project-automation bot moved this to Needs triage in Bug Triage Dec 9, 2025

UberMouse force-pushed the storybook-v9-support branch from a451802 to 14cc4e5 Compare December 9, 2025 02:00

UberMouse changed the title ~~[heft] update storybook to be compatible with v9~~ [heft] update storybook plugin to be compatible with v9 Dec 9, 2025

[heft] update storybook to be compatible with v9

5dbc106

Also adds support for serve mode detection when using the heft-rspack-plugin

UberMouse force-pushed the storybook-v9-support branch from 14cc4e5 to 5dbc106 Compare December 9, 2025 02:26

iclanton reviewed Dec 17, 2025

View reviewed changes

iclanton moved this from Needs triage to In Progress in Bug Triage Dec 17, 2025

UberMouse added 2 commits December 19, 2025 10:08

code review changes

649b72f

Merge branch 'main' into storybook-v9-support

e16ec67

UberMouse commented Dec 18, 2025

View reviewed changes

fix ci issues

9237323

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[heft] update storybook plugin to be compatible with v9 #5492

[heft] update storybook plugin to be compatible with v9 #5492

UberMouse commented Dec 9, 2025

Uh oh!

iclanton Dec 17, 2025

Uh oh!

UberMouse Dec 18, 2025

Uh oh!

iclanton Dec 17, 2025

Uh oh!

UberMouse Dec 18, 2025

Uh oh!

Uh oh!

iclanton Dec 17, 2025

Uh oh!

Uh oh!

Uh oh!

UberMouse Dec 18, 2025

Uh oh!

UberMouse commented Dec 18, 2025

Uh oh!

iclanton commented Dec 22, 2025

Uh oh!

octogonz commented Dec 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[heft] update storybook plugin to be compatible with v9 #5492

Are you sure you want to change the base?

[heft] update storybook plugin to be compatible with v9 #5492

Conversation

UberMouse commented Dec 9, 2025

Summary

Details

How it was tested

Impacted documentation

Uh oh!

iclanton Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

UberMouse Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

iclanton Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

UberMouse Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

iclanton Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

UberMouse Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

UberMouse commented Dec 18, 2025

Uh oh!

iclanton commented Dec 22, 2025

Uh oh!

octogonz commented Dec 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants