Update dependencies for React 19 type compatibility #30031
Conversation
This fixes its usage of the global JSX namespace
|
It would be EPIC if this could be pack-ported to Storybook v6 and v7 🚀 |
|
OK, I found the problem with building |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
LGTM
5 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile
|
Thanks for your contribution @mrginglymus! I have started a canary release so you can test it out in a real scenario. @imjordanxd unfortunately won't happen, it would be amazing if you could upgrade your project instead. There are a ton of incredible fixes and features we have shipped since Storybook 6/7, please consider upgrading if possible. |
There was a problem hiding this comment.
LGTM
5 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 5acb6e1. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 59 | 59 | 0 |
| Self size | 411 KB | 45 KB | 🎉 -366 KB 🎉 |
| Dependency size | 13.46 MB | 13.46 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/addon-onboarding
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 0 | 2 | 🚨 +2 🚨 |
| Self size | 235 KB | 216 KB | 🎉 -19 KB 🎉 |
| Dependency size | 670 B | 235 KB | 🚨 +235 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/core
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 50 | 50 | 0 |
| Self size | 21.44 MB | 21.39 MB | 🎉 -46 KB 🎉 |
| Dependency size | 14.36 MB | 14.36 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/experimental-nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 153 | 87 | 🎉 -66 🎉 |
| Self size | 231 KB | 231 KB | 🎉 -16 B 🎉 |
| Dependency size | 47.61 MB | 31.57 MB | 🎉 -16.04 MB 🎉 |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 51 | 51 | 0 |
| Self size | 22 KB | 22 KB | 0 B |
| Dependency size | 35.80 MB | 35.75 MB | 🎉 -46 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
sb
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 52 | 52 | 0 |
| Self size | 1 KB | 1 KB | 0 B |
| Dependency size | 35.82 MB | 35.77 MB | 🎉 -46 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 393 | 393 | 0 |
| Self size | 493 KB | 493 KB | 0 B |
| Dependency size | 80.50 MB | 80.46 MB | 🎉 -43 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 273 | 273 | 0 |
| Self size | 612 KB | 612 KB | 0 B |
| Dependency size | 70.50 MB | 70.45 MB | 🎉 -43 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 109 | 109 | 0 |
| Self size | 1.11 MB | 1.11 MB | 0 B |
| Dependency size | 44.93 MB | 44.89 MB | 🎉 -46 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
Thanks - my project now passes type checking and the storybook continues to build correctly using this canary release |
What I did
A number of bundled packages in storybook still use the deprecated global
JSXnamespace from React; this PR makes minor updates to those packages to bring in React 19 type-compatible versions.There may be further issues with
@storybook/blocks, but I'm having trouble building it (even onnext). I'm on a limited dev environment as I only have access to a Windows and WSL dev environment, and storybook does not play nice with Windows...Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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 pull request has been released as version
0.0.0-pr-30031-sha-5acb6e15. Try it out in a new sandbox by runningnpx [email protected] sandboxor in an existing project withnpx [email protected] upgrade.More information
0.0.0-pr-30031-sha-5acb6e15r19-type-compat5acb6e151734168729)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=30031Greptile Summary
Updates dependencies and type definitions across multiple packages to ensure compatibility with React 19, particularly addressing the deprecated global JSX namespace.
code/.yarn/patches/markdown-to-jsx-npm-7.7.1-6038885620.patchto useReact.ReactNodeinstead ofReact.ReactChildcode/lib/blocks/package.jsonto include React 19 betacode/renderers/react/src/types.tsto import JSX namespace directly from Reactcode/core/package.jsonfor React 19 compatibilitycode/lib/blocks/src/blocks/mdx.tsxfor type safety💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!