Manager: Upgrade to `react` v19 for manager UI & Addons #32406

ndelangen · 2025-09-04T09:50:59Z

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Updated On: 2025-09-04 09:52:15 UTC

This PR upgrades React from v18.2.0 to v19.1.1 across Storybook's manager UI and addon ecosystem. The changes are applied systematically to multiple packages including the root package.json, core Storybook package, and various addons (a11y, docs, jest, onboarding, pseudo-states, themes, vitest, create-storybook). The upgrade affects both direct dependencies and devDependencies, with yarn resolutions ensuring consistent versions across the monorepo workspace.

The upgrade encompasses the entire React ecosystem within Storybook, including React DOM and related packages like react-helmet-async, react-inspector, react-syntax-highlighter, and react-textarea-autosize. The changes maintain backward compatibility for end users by keeping flexible peer dependency ranges in addon packages (e.g., ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0) while using React v19 for development and build processes.

This modernization effort positions Storybook to leverage React 19's improvements including enhanced concurrent features, automatic batching optimizations, and new APIs. The coordinated approach ensures consistency across the entire addon ecosystem and manager UI components.

Confidence score: 2/5

This PR requires careful review due to React 19's breaking changes and dependency compatibility issues
Score lowered due to critical compatibility problems with deprecated APIs and outdated dependencies
Pay close attention to code/addons/onboarding/package.json and code/addons/jest/package.json for breaking changes

This reverts commit ba40239.

greptile-apps

_{10 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

nx-cloud · 2025-09-04T09:53:25Z

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

_{To disable these notifications, a workspace admin can disable them in workspace settings.}

View your CI Pipeline Execution ↗ for commit cd348a9

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	❌ Failed	41s	View ↗

☁️ Nx Cloud last updated this comment at 2025-09-10 10:05:56 UTC

…nd yarn.lock

storybook-pr-benchmarking · 2025-09-04T10:44:15Z

Package Benchmarks

^{Commit: cd348a9, ran on 10 September 2025 at 10:10:12 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-a11y`

	Before	After	Difference
Dependency count	2	2	0
Self size	508 KB	697 KB	🚨 +189 KB 🚨
Dependency size	2.80 MB	2.80 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	18	18	0
Self size	2.01 MB	2.02 MB	🚨 +11 KB 🚨
Dependency size	9.40 MB	9.40 MB	0 B
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	48	48	0
Self size	30.74 MB	30.76 MB	🚨 +19 KB 🚨
Dependency size	17.61 MB	17.61 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	529	529	0
Self size	928 KB	939 KB	🚨 +12 KB 🚨
Dependency size	58.34 MB	58.36 MB	🚨 +13 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs-vite`

	Before	After	Difference
Dependency count	130	130	0
Self size	4.00 MB	4.01 MB	🚨 +12 KB 🚨
Dependency size	21.39 MB	21.40 MB	🚨 +12 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-native-web-vite`

	Before	After	Difference
Dependency count	163	163	0
Self size	31 KB	31 KB	🎉 -24 B 🎉
Dependency size	22.78 MB	22.79 MB	🚨 +12 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	120	120	0
Self size	36 KB	36 KB	0 B
Dependency size	19.34 MB	19.35 MB	🚨 +12 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	272	272	0
Self size	25 KB	25 KB	0 B
Dependency size	43.03 MB	43.04 MB	🚨 +12 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	204	204	0
Self size	879 KB	879 KB	0 B
Dependency size	81.72 MB	81.74 MB	🚨 +19 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	173	173	0
Self size	35 KB	35 KB	0 B
Dependency size	76.79 MB	76.81 MB	🚨 +19 KB 🚨
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	49	49	0
Self size	1.52 MB	1.52 MB	🎉 -30 B 🎉
Dependency size	48.35 MB	48.37 MB	🚨 +19 KB 🚨
Bundle Size Analyzer	node	node

`@storybook/react`

	Before	After	Difference
Dependency count	2	2	0
Self size	872 KB	883 KB	🚨 +12 KB 🚨
Dependency size	18 KB	18 KB	0 B
Bundle Size Analyzer	Link	Link

….9 respectively in package.json and yarn.lock

…imization and improve readability

- Changed TypeScript target and lib versions in tsconfig.json to support ES2024 features. - Updated useRef hooks in multiple components to explicitly allow null values for better type safety. - Enhanced type checks in getStoryId and copyToClipboard functions to ensure proper handling of props.

- Updated tsconfig.json to target ESNext and use the latest lib definitions. - Replaced deprecated ReactDOM.render with createRoot for improved rendering in onboarding manager. - Added explicit JSX type imports in various components for better type safety. - Converted ts-ignore comments to ts-expect-error for better TypeScript error handling in prop types.

- Updated prop types in Tabs and Tooltip components to allow for additional types. - Refined useRef hooks in FileSearchList and TestingModule to explicitly handle null values. - Removed unnecessary ts-expect-error comments and added type checks for better error handling. - Improved type definitions in useExpanded hook for clearer state management.

- Changed module from ESNext to Preserve for compatibility. - Updated target from esnext to es2020 to align with project requirements.

Reapply "upgrade to react 19"

cde5482

This reverts commit ba40239.

ndelangen self-assigned this Sep 4, 2025

ndelangen added api: addons maintenance User-facing maintenance tasks react core builder-manager ci:normal labels Sep 4, 2025

greptile-apps bot reviewed Sep 4, 2025

View reviewed changes

ndelangen marked this pull request as draft September 4, 2025 09:52

Upgrade react-inspector from version 8.0.0 to 9.0.0 in package.json a…

f59c39c

…nd yarn.lock

ndelangen added 9 commits September 4, 2025 13:02

Refactor sanitizeName function to explicitly type key as string

757824e

Upgrade @types/react and @types/react-dom to version 19.1.12 and 19.1…

6d6597d

….9 respectively in package.json and yarn.lock

Upgrade @types/react from version 18.0.0 to 19.0.0 in package.json

8aa0d9e

Refactor TagsFilterPanel component to use useMemo for performance opt…

80ccafd

…imization and improve readability

Merge branch 'next' into norbert/upgrade-react

12b8f81

Update TypeScript configuration to change module and target settings

cd348a9

- Changed module from ESNext to Preserve for compatibility. - Updated target from esnext to es2020 to align with project requirements.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Manager: Upgrade to `react` v19 for manager UI & Addons #32406

Manager: Upgrade to `react` v19 for manager UI & Addons #32406

Uh oh!

ndelangen commented Sep 4, 2025 •

edited by greptile-apps bot

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

nx-cloud bot commented Sep 4, 2025 •

edited

Loading

Uh oh!

storybook-pr-benchmarking bot commented Sep 4, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Manager: Upgrade to react v19 for manager UI & Addons #32406

Are you sure you want to change the base?

Manager: Upgrade to react v19 for manager UI & Addons #32406

Uh oh!

Conversation

ndelangen commented Sep 4, 2025 • edited by greptile-apps bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Confidence score: 2/5

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

nx-cloud bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 Nx Cloud AI Fix Eligible

Uh oh!

storybook-pr-benchmarking bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-docs

storybook

@storybook/nextjs

@storybook/nextjs-vite

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/react-webpack5

@storybook/cli

@storybook/codemod

create-storybook

@storybook/react

Uh oh!

Uh oh!

Manager: Upgrade to `react` v19 for manager UI & Addons #32406

Manager: Upgrade to `react` v19 for manager UI & Addons #32406

ndelangen commented Sep 4, 2025 •

edited by greptile-apps bot

Loading

nx-cloud bot commented Sep 4, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Sep 4, 2025 •

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-docs`

`storybook`

`@storybook/nextjs`

`@storybook/nextjs-vite`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/react-webpack5`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`

`@storybook/react`