Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
UberMouse wants to merge 4 commits into
base: main
Choose a base branch
from
+1,503 −5,349
Open

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5dbc106
[heft] update storybook to be compatible with v9
Dec 9, 2025
649b72f
code review changes
UberMouse Dec 18, 2025
e16ec67
Merge branch 'main' into storybook-v9-support
UberMouse Dec 18, 2025
9237323
fix ci issues
UberMouse Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 10 additions & 13 deletions build-tests-samples/heft-storybook-react-tutorial-storykit/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,24 @@
},
"devDependencies": {
"@babel/core": "~7.20.0",
"@storybook/addon-actions": "~6.4.18",
"@storybook/addon-essentials": "~6.4.18",
"@storybook/addon-links": "~6.4.18",
"@storybook/cli": "~6.4.18",
"@storybook/components": "~6.4.18",
"@storybook/core-events": "~6.4.18",
"@storybook/react": "~6.4.18",
"@storybook/theming": "~6.4.18",
"@storybook/cli": "~9.1.6",
"@storybook/react": "~9.1.6",
"@storybook/react-webpack5": "~9.1.6",
"@types/heft-jest": "1.0.1",
"@types/node": "20.17.19",
"@types/react-dom": "17.0.25",
"@types/react": "17.0.74",
"@types/react-dom": "~19.2.3",
"@types/react": "~19.2.7",
"@types/webpack-env": "1.18.8",
"babel-loader": "~8.2.3",
"css-loader": "~5.2.7",
"jest": "~29.3.1",
"react-dom": "~17.0.2",
"react": "~17.0.2",
"react-dom": "~19.2.1",
"react": "~19.2.1",
"style-loader": "~2.0.0",
"terser-webpack-plugin": "~3.0.8",
"typescript": "~5.8.2",
"webpack": "~4.47.0"
"webpack": "~5.98.0",
"storybook": "~9.1.6",
"@testing-library/dom": "~7.21.4"
}
}
5 changes: 4 additions & 1 deletion build-tests-samples/heft-storybook-react-tutorial/.storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
const path = require('path');

module.exports = {
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'), '..')
Copy link
Member

@iclanton iclanton Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@UberMouse UberMouse Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

};
6 changes: 3 additions & 3 deletions build-tests-samples/heft-storybook-react-tutorial/config/heft.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"webpack": {
"taskDependencies": ["typescript"],
"taskPlugin": {
"pluginPackage": "@rushstack/heft-webpack4-plugin"
"pluginPackage": "@rushstack/heft-webpack5-plugin"
}
},
"storybook": {
Expand All @@ -33,8 +33,8 @@
"pluginPackage": "@rushstack/heft-storybook-plugin",
"options": {
"storykitPackageName": "heft-storybook-react-tutorial-storykit",
"cliPackageName": "@storybook/react",
"cliCallingConvention": "storybook6",
"cliPackageName": "storybook",
"cliCallingConvention": "storybook9",
"staticBuildOutputFolder": "dist-storybook"
}
}
Expand Down
20 changes: 12 additions & 8 deletions build-tests-samples/heft-storybook-react-tutorial/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
"_phase:test": "heft run --only test -- --clean"
},
"dependencies": {
"react-dom": "~17.0.2",
"react": "~17.0.2",
"react-dom": "~19.2.1",
"react": "~19.2.1",
"tslib": "~2.8.1"
},
"devDependencies": {
Expand All @@ -23,13 +23,14 @@
"@rushstack/heft-lint-plugin": "workspace:*",
"@rushstack/heft-storybook-plugin": "workspace:*",
"@rushstack/heft-typescript-plugin": "workspace:*",
"@rushstack/heft-webpack4-plugin": "workspace:*",
"@rushstack/webpack4-module-minifier-plugin": "workspace:*",
"@storybook/react": "~6.4.18",
"@rushstack/heft-webpack5-plugin": "workspace:*",
"@rushstack/webpack5-module-minifier-plugin": "workspace:*",
"@storybook/react-webpack5": "~9.1.6",
"@storybook/react": "~9.1.6",
"@types/heft-jest": "1.0.1",
"@types/node": "20.17.19",
"@types/react": "17.0.74",
"@types/react-dom": "17.0.25",
"@types/react": "~19.2.7",
"@types/react-dom": "~19.2.3",
"@types/webpack-env": "1.18.8",
"css-loader": "~5.2.7",
"eslint": "~9.37.0",
Expand All @@ -39,6 +40,9 @@
"source-map-loader": "~1.1.3",
"style-loader": "~2.0.0",
"typescript": "~5.8.2",
"webpack": "~4.47.0"
"webpack": "~5.98.0",
"storybook": "~9.1.6",
"@testing-library/dom": "~7.21.4",
"@rushstack/module-minifier": "workspace:*"
}
}
22 changes: 11 additions & 11 deletions build-tests-samples/heft-storybook-react-tutorial/src/ToggleSwitch.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
// See LICENSE in the project root for license information.

import * as React from 'react';
import type { ComponentStory, ComponentMeta } from 'heft-storybook-react-tutorial-storykit';
import type { Meta, StoryObj } from 'heft-storybook-react-tutorial-storykit';

import { ToggleSwitch } from './ToggleSwitch';

Expand All @@ -13,14 +12,15 @@ export default {
leftColor: { control: 'color' },
rightColor: { control: 'color' }
}
} as ComponentMeta<typeof ToggleSwitch>;
} as Meta<typeof ToggleSwitch>;

const Template: ComponentStory<typeof ToggleSwitch> = (args) => <ToggleSwitch {...args} />;

// eslint-disable-next-line
export const Primary: any = Template.bind({});
Primary.args = {};
export const Primary: StoryObj<typeof ToggleSwitch> = {
args: {
leftColor: '#880000',
rightColor: '#008000'
}
};

// eslint-disable-next-line
export const Secondary: any = Template.bind({});
Secondary.args = {};
export const Secondary: StoryObj<typeof ToggleSwitch> = {
args: {}
};
4 changes: 2 additions & 2 deletions build-tests-samples/heft-storybook-react-tutorial/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
// See LICENSE in the project root for license information.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';

import { ExampleApp } from './ExampleApp';

import './index.css';

const rootDiv: HTMLElement = document.getElementById('root') as HTMLElement;
ReactDOM.render(<ExampleApp />, rootDiv);
createRoot(rootDiv).render(<ExampleApp />);
5 changes: 3 additions & 2 deletions build-tests-samples/heft-storybook-react-tutorial/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@

"module": "esnext",
"moduleResolution": "node",
"target": "es5",
"lib": ["es5", "scripthost", "es2015.collection", "es2015.promise", "es2015.iterable", "dom"]
"target": "es2020",
"lib": ["es2020", "scripthost", "dom"],
"skipLibCheck": true
Copy link
Member

@iclanton iclanton Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's broken in dependencies?

Copy link
Contributor Author

@UberMouse UberMouse Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

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.

},
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["node_modules", "lib"]
Expand Down
11 changes: 9 additions & 2 deletions build-tests-samples/heft-storybook-react-tutorial/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleMinifierPlugin, WorkerPoolMinifier } = require('@rushstack/webpack4-module-minifier-plugin');
const { ModuleMinifierPlugin } = require('@rushstack/webpack5-module-minifier-plugin');
const { WorkerPoolMinifier } = require('@rushstack/module-minifier');

/**
* If the "--production" command-line parameter is specified when invoking Heft, then the
Expand Down Expand Up @@ -57,7 +58,13 @@ function createWebpackConfig({ production }) {
optimization: {
minimizer: [
new ModuleMinifierPlugin({
minifier: new WorkerPoolMinifier(),
minifier: new WorkerPoolMinifier({
terserOptions: {
ecma: 2020,
mangle: true
},
verbose: true
}),
useSourceMap: true
})
]
Expand Down
15 changes: 15 additions & 0 deletions common/changes/@rushstack/heft-storybook-plugin/storybook-v9-support_2025-12-09-01-59.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"changes": [
{
"packageName": "@rushstack/heft-storybook-plugin",
"comment": "support storybook v9",
"type": "minor"
},
{
"packageName": "@rushstack/heft-storybook-plugin",
"comment": "support serve mode with rspack",
"type": "minor"
}
],
"packageName": "@rushstack/heft-storybook-plugin"
}
12 changes: 12 additions & 0 deletions common/config/rush/browser-approved-packages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,14 @@
"name": "@rushstack/rush-vscode-command-webview",
"allowedCategories": [ "vscode-extensions" ]
},
{
"name": "@storybook/react-webpack5",
"allowedCategories": [ "libraries", "tests" ]
},
{
"name": "@testing-library/dom",
"allowedCategories": [ "tests" ]
},
{
"name": "@ungap/structured-clone",
"allowedCategories": [ "libraries" ]
Expand Down Expand Up @@ -98,6 +106,10 @@
"name": "scheduler",
"allowedCategories": [ "vscode-extensions" ]
},
{
"name": "storybook",
"allowedCategories": [ "tests" ]
},
{
"name": "tslib",
"allowedCategories": [ "libraries", "tests", "vscode-extensions" ]
Expand Down
2 changes: 1 addition & 1 deletion common/config/rush/nonbrowser-approved-packages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@
},
{
"name": "@rushstack/heft-rspack-plugin",
"allowedCategories": [ "tests" ]
"allowedCategories": [ "libraries", "tests" ]
},
{
"name": "@rushstack/heft-sass-load-themed-styles-plugin",
Expand Down
6 changes: 5 additions & 1 deletion common/config/subspaces/default/common-versions.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,10 @@
"@rushstack/set-webpack-public-path-plugin": [
// This is used by the webpack 4 localization plugin tests
"^4.1.16"
]
],
"@types/react": ["~19.2.7"],
Copy link
Member

@iclanton iclanton Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we just update the whole repo?

"@types/react-dom": ["~19.2.3"],
"react": ["~19.2.1"],
"react-dom": ["~19.2.1"]
}
}
Loading
Loading