Fix Storybook 10 build: complete v7→v10 migration by Copilot · Pull Request #3007 · primer/css

Copilot · 2026-03-12T20:01:26Z

The "Deploy preview / Build" CI job was failing because storybook CLI was upgraded to v10 while all framework/addon packages remained at v7, causing cascading incompatibilities.

Root causes

Manager build: v7 @storybook/docs-tools → doctrine → require('assert') (Node built-in), unresolvable by esbuild for browser
Framework mismatch: @storybook/react-webpack5@7 API-incompatible with storybook@10
Missing compilers: Storybook 10 requires explicit Babel (@storybook/addon-webpack5-compiler-babel) and MDX (@storybook/addon-docs) addons — no longer bundled
Broken compat shims: @storybook/manager-api@8 and @storybook/theming@8 shims reference storybook/internal/manager-api which was removed in v10

Changes

docs/package.json

Upgrade @storybook/react-webpack5 → ^10.2.17
Upgrade storybook-addon-pseudo-states → ^10.2.17
Add @storybook/addon-docs@^10.2.17, @storybook/addon-webpack5-compiler-babel@^4.0.0
Add @babel/preset-react, sass-loader, css-loader, style-loader as explicit deps
Add @storybook/manager-api, @storybook/theming, @storybook/components v8 compat shims
Remove: @storybook/addon-essentials, @storybook/addon-interactions, @storybook/addon-links, @storybook/addon-styling, @storybook/addon-storysource, @storybook/blocks@7, @storybook/react@7, @storybook/testing-library
Add postinstall hook to run shim fix script

docs/.storybook/main.js

Replace @storybook/addon-styling with explicit webpackFinal SCSS config
Register @storybook/addon-webpack5-compiler-babel and @storybook/addon-docs
Add webpack alias: @storybook/blocks → @storybook/addon-docs/blocks

docs/.storybook/manager.js / theme.js

Update imports: @storybook/manager-api → storybook/manager-api, @storybook/theming → storybook/theming

docs/scripts/fix-storybook-shims.mjs (new)

Postinstall script that patches @storybook/manager-api and @storybook/theming v8 shims to reference the correct storybook 10 public paths (storybook/manager-api, storybook/theming) instead of the removed internal paths

What should reviewers focus on?

The postinstall shim-patching approach (docs/scripts/fix-storybook-shims.mjs) is the most unusual part. It's needed because @geometricpanda/storybook-addon-badges@2.x (used by deprecated-component stories) has no storybook 10 release and its v8 compat shims are broken for v10. The script patches two files in node_modules after install — fragile by nature, but the only option short of removing badge support from ~16 story files or forking the addon.

@storybook/blocks@8.6.14 is kept as a dep alongside @storybook/addon-docs@10 because the former is used directly in MDX story imports; the webpack alias redirects those imports to the v10-compatible implementation at build time.

Can these changes ship as is?

Yes, this PR does not depend on additional changes. 🚢

Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

… fix compat shims Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

…an up shim script Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

changeset-bot · 2026-03-12T20:01:38Z

⚠️ No Changeset found

Latest commit: 9c62235

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

…ts (#3008) * Initial plan * fix: resolve storybook peer dependency conflicts in docs install - Update @geometricpanda/storybook-addon-badges to ^2.0.5 which supports @storybook/blocks@^8.3.0 (v2.0.0 only supported ^7.0.0) - Add docs/.npmrc with legacy-peer-deps=true to handle the intentional mixed storybook 8/10 package setup used by shims and webpack aliases Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

* Initial plan * Fix ESM compatibility: replace require('sass') with ESM import in main.js Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> * Fix Storybook 10 build: complete v7→v10 migration (#3007) * Initial plan * Initial plan for fixing storybook build failures Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> * Fix Storybook 10 build: update packages, add SCSS/Babel/docs support, fix compat shims Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> * Address code review: remove unused assert dep, rename config var, clean up shim script Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> * Fix docs npm install failure due to storybook peer dependency conflicts (#3008) * Initial plan * fix: resolve storybook peer dependency conflicts in docs install - Update @geometricpanda/storybook-addon-badges to ^2.0.5 which supports @storybook/blocks@^8.3.0 (v2.0.0 only supported ^7.0.0) - Add docs/.npmrc with legacy-peer-deps=true to handle the intentional mixed storybook 8/10 package setup used by shims and webpack aliases Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

…ybook script (#3004) * Bump tar and storybook in /docs Removes [tar](https://github.com/isaacs/node-tar). It's no longer used after updating ancestor dependency [storybook](https://github.com/storybookjs/storybook/tree/HEAD/code/core). These dependencies need to be updated together. Removes `tar` Updates `storybook` from 7.6.21 to 10.2.17 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.2.17/code/core) --- updated-dependencies: - dependency-name: tar dependency-version: dependency-type: indirect - dependency-name: storybook dependency-version: 10.2.17 dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> * Initial plan * Fix storybook build: remove invalid positional argument `public/static` Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> * Fix ESM compatibility in .storybook/main.js (#3005) * Initial plan * Fix ESM compatibility: replace require('sass') with ESM import in main.js Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> * Fix Storybook 10 build: complete v7→v10 migration (#3007) * Initial plan * Initial plan for fixing storybook build failures Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> * Fix Storybook 10 build: update packages, add SCSS/Babel/docs support, fix compat shims Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> * Address code review: remove unused assert dep, rename config var, clean up shim script Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> * Fix docs npm install failure due to storybook peer dependency conflicts (#3008) * Initial plan * fix: resolve storybook peer dependency conflicts in docs install - Update @geometricpanda/storybook-addon-badges to ^2.0.5 which supports @storybook/blocks@^8.3.0 (v2.0.0 only supported ^7.0.0) - Add docs/.npmrc with legacy-peer-deps=true to handle the intentional mixed storybook 8/10 package setup used by shims and webpack aliases Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> * fix: regenerate docs/package-lock.json to resolve storybook binary not found (#3009) * Initial plan * fix: regenerate docs/package-lock.json to fix storybook binary not found Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

Copilot AI and others added 4 commits March 12, 2026 18:23

Initial plan

b5301d8

Initial plan for fixing storybook build failures

3722513

Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

Fix Storybook 10 build: update packages, add SCSS/Babel/docs support,…

c0a5f15

… fix compat shims Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

Address code review: remove unused assert dep, rename config var, cle…

ce5331e

…an up shim script Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

Copilot AI assigned Copilot and llastflowers Mar 12, 2026

Copilot created this pull request from a session on behalf of llastflowers March 12, 2026 20:01 View session

llastflowers added the skip changeset label Mar 12, 2026

llastflowers temporarily deployed to github-pages March 12, 2026 20:14 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Storybook Preview March 12, 2026 20:15 Inactive

llastflowers marked this pull request as ready for review March 12, 2026 20:15

llastflowers requested review from a team as code owners March 12, 2026 20:15

llastflowers requested a review from siddharthkp March 12, 2026 20:15

llastflowers merged commit c0daf21 into copilot/66837132510-fix-github-actions-workflow Mar 12, 2026
17 of 18 checks passed

llastflowers deleted the copilot/fix-github-actions-workflow-one-more-time branch March 12, 2026 20:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix Storybook 10 build: complete v7→v10 migration#3007

Fix Storybook 10 build: complete v7→v10 migration#3007
llastflowers merged 5 commits intocopilot/66837132510-fix-github-actions-workflowfrom
copilot/fix-github-actions-workflow-one-more-time

Copilot AI commented Mar 12, 2026

Uh oh!

changeset-bot Bot commented Mar 12, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Mar 12, 2026

Root causes

Changes

What should reviewers focus on?

Can these changes ship as is?

Uh oh!

changeset-bot Bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Mar 12, 2026 •

edited

Loading