refactor: upgrade Storybook 8.6 to 10.3 with webpack#17900
Merged
Conversation
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
github-actions
Bot
added
config ⚙️
This was referenced Apr 1, 2026
wackerow
requested changes
Apr 1, 2026
Member
wackerow
left a comment
wackerow
left a comment
There was a problem hiding this comment.
Looks good @pettinarip! I think just the import order needs tidying (linter may not catch that one but we should place the type declaration below the imports) then this should be good to go
| }, | ||
|
|
||
| features: { | ||
| experimentalRSC: true, |
Member
There was a problem hiding this comment.
Is this still recognized/needed in SB10? Potential loose end, not a blocker
Member
Author
There was a problem hiding this comment.
… barrel Replace all @storybook/react/* wildcard subpath imports with @storybook/react barrel imports across 17 files. This ensures the SB9 automigration codemods handle all files uniformly. Also consolidate 4 redundant @storybook/test imports in ListenToPlayer.stories.tsx into a single import statement.
Run npx storybook@9 upgrade with automigrations: - upgrade-storybook-related-dependencies - initial-globals (globals → initialGlobals) - consolidated-imports (@storybook/* → storybook/*) - remove-addon-interactions (moved to core) - renderer-to-framework (@storybook/react → @storybook/nextjs) - remove-essential-addons (replaced with @storybook/addon-docs) - remove-docs-autodocs (deprecated config removed)
The PhoneDecorator.tsx shared decorator was not updated by the automigration because it doesn't match the .stories.tsx glob pattern. Update @storybook/react → @storybook/nextjs to match the rest of the codebase.
Replace require() calls with fs.readFileSync + JSON.parse for SB10 ESM-only compatibility. Uses import.meta.dirname for robust file-relative path resolution. Removes leftover console.log debug output.
Run npx storybook@latest upgrade with automigrations: - addon-globals-api (viewport/backgrounds configuration) - nextjs-to-nextjs-vite (reverted - staying on webpack per plan) Reverted the automatic nextjs-vite migration: replaced @storybook/nextjs-vite with @storybook/nextjs across all files to keep the webpack-based framework as intended.
- storybook-next-intl: 1.2.5 → 10.1.1 (supports SB9/10, next-intl v3/v4) - @chromatic-com/storybook: 1.5.0 → 5.1.1 (requires SB10) - eslint-plugin-storybook: 0.8.0 → 10.3.3 - chromatic: 12.0.0 → 16.0.0
Update code example from @storybook/react to @storybook/nextjs to match the new framework-based imports after the SB10 upgrade.
The previous fs.readFileSync + import.meta.dirname approach fails because this file is bundled by webpack for the browser preview iframe, not run in Node. import.meta.dirname is undefined in the browser context. Revert to require() which webpack resolves at build time. The SB10 ESM-only requirement applies to main.ts (Node-side config), not to files bundled by webpack for the preview.
The SB10 nextjs-to-nextjs-vite automigration added vite as a direct devDependency. Since we reverted to the webpack framework, vite is not needed.
- Change moduleResolution from "node" to "bundler" — required because @storybook/nextjs v10 uses package.json exports with no main/types fallback fields. Also the recommended setting for Next.js 16. - Exclude .storybook/ from Next.js type checking since it has its own build pipeline and its dependencies (storybook packages) should not be resolved during next build.
pettinarip
force-pushed
the
refactor/storybook-10-upgrade-webpack
branch
from
ee9f81a to
097a282
Compare
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@storybook/nextjs(webpack) framework — reverted automatic vite migrationstorybook-next-intl10.1.1,@chromatic-com/storybook5.1.1,eslint-plugin-storybook10.3.3,chromatic16.0.0@storybook/react/*imports before migration for uniform codemod handlingPhoneDecorator.tsxshared decorator import missed by automigrationKey SB9 automigrations applied
globals→initialGlobalsin preview config@storybook/react→@storybook/nextjs(renderer-to-framework)@storybook/manager-api→storybook/manager-api, etc.)addon-essentials,addon-interactions(moved to core), addedaddon-docsdocs.autodocsconfigKey SB10 changes
addon-globals-apimigration for viewport/backgroundsTest plan
pnpm build-storybookpassespnpm build-storybook:chromaticpasses