Update dependencies for React 19 type compatibility #30031

mrginglymus · 2024-12-11T15:10:43Z

What I did

A number of bundled packages in storybook still use the deprecated global JSX namespace 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 on next). 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:

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 pull request has been released as version 0.0.0-pr-30031-sha-5acb6e15. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information


Published version	`0.0.0-pr-30031-sha-5acb6e15`
Triggered by	@yannbf
Repository	mrginglymus/storybook
Branch	`r19-type-compat`
Commit	`5acb6e15`
Datetime	Sat Dec 14 09:32:09 UTC 2024 (`1734168729`)
Workflow run	12328745571

To request a new release of this pull request, mention the @storybookjs/core team.

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=30031

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.8 MB	77.8 MB	0 B	3.95	0%
initSize	136 MB	136 MB	-38.9 kB	-9.11	0%
diffSize	58.4 MB	58.4 MB	-38.9 kB	-13.53	-0.1%
buildSize	7.23 MB	7.21 MB	-17 kB	-7.5	-0.2%
buildSbAddonsSize	1.86 MB	1.86 MB	501 B	-2.89	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.86 MB	-5.17 kB	-1.14	-0.3%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.92 MB	3.92 MB	-4.67 kB	-4.11	-0.1%
buildPreviewSize	3.3 MB	3.29 MB	-12.4 kB	-601.98	-0.4%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	17.2s	15.8s	-1s -391ms	0.21	-8.8%
generateTime	21.2s	19.9s	-1s -253ms	-0.66	-6.3%
initTime	16.4s	14.3s	-2s -114ms	-0.34	-14.7%
buildTime	9s	8.4s	-574ms	-1.32	🔰-6.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.5s	5.5s	1s	0.24	18.6%
devManagerResponsive	3.3s	4s	625ms	0.03	15.6%
devManagerHeaderVisible	511ms	660ms	149ms	-0.19	22.6%
devManagerIndexVisible	522ms	675ms	153ms	-0.36	22.7%
devStoryVisibleUncached	1.6s	2s	380ms	0.55	18.3%
devStoryVisible	544ms	700ms	156ms	-0.18	22.3%
devAutodocsVisible	450ms	642ms	192ms	0.5	29.9%
devMDXVisible	492ms	634ms	142ms	0.33	22.4%
buildManagerHeaderVisible	517ms	709ms	192ms	0.15	27.1%
buildManagerIndexVisible	608ms	827ms	219ms	0.24	26.5%
buildStoryVisible	510ms	692ms	182ms	0.39	26.3%
buildAutodocsVisible	403ms	532ms	129ms	0.21	24.2%
buildMDXVisible	417ms	575ms	158ms	0.73	27.5%

Greptile Summary

Updates dependencies and type definitions across multiple packages to ensure compatibility with React 19, particularly addressing the deprecated global JSX namespace.

Added patch to code/.yarn/patches/markdown-to-jsx-npm-7.7.1-6038885620.patch to use React.ReactNode instead of React.ReactChild
Updated React peer dependencies in code/lib/blocks/package.json to include React 19 beta
Modified code/renderers/react/src/types.ts to import JSX namespace directly from React
Updated emotion packages and @radix-ui/react-dialog in code/core/package.json for React 19 compatibility
Added 'as const' assertion in code/lib/blocks/src/blocks/mdx.tsx for type safety

_{💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!}

This fixes its usage of the global JSX namespace

…pace

imjordanxd · 2024-12-11T22:44:29Z

It would be EPIC if this could be pack-ported to Storybook v6 and v7 🚀

mrginglymus · 2024-12-14T09:31:15Z

OK, I found the problem with building @storybook/blocks. I've updated markdown-to-jsx to its latest version, but even that doesn't fully support React 19 yet type-wise, so I've patched it to expedite getting storybook type-compatible, and will raise a PR over there soon.

greptile-apps

LGTM

_{5 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings | Greptile}

yannbf · 2024-12-14T09:33:40Z

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.

greptile-apps

LGTM

_{5 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings | Greptile}

nx-cloud · 2024-12-14T09:36:02Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit a1f61f5. 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 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

storybook-pr-benchmarking · 2024-12-14T09:45:20Z

Package Benchmarks

^{Commit: a1f61f5, ran on 19 December 2024 at 10:55:24 UTC}

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

`@storybook/core`

	Before	After	Difference
Dependency count	50	50	0
Self size	21.45 MB	21.40 MB	🎉 -43 KB 🎉
Dependency size	14.36 MB	14.36 MB	0 B
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.81 MB	35.77 MB	🎉 -43 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.83 MB	35.79 MB	🎉 -43 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.52 MB	80.47 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.51 MB	70.47 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.94 MB	44.90 MB	🎉 -43 KB 🎉
Bundle Size Analyzer	Link	Link

mrginglymus · 2024-12-14T11:21:26Z

Thanks for your contribution @mrginglymus! I have started a canary release so you can test it out in a real scenario.

Thanks - my project now passes type checking and the storybook continues to build correctly using this canary release

yannbf · 2024-12-16T14:21:47Z

Hey @mrginglymus thanks for getting back to us! We as a team feel like the markdown-to-jsx dep shouldn't be patched. Ideally the maintainers of markdown-to-jsx should make a release with the fix. Seems like the repo is quite active, I'm wondering if you got around to either reporting or making a PR to their repo?

mrginglymus · 2024-12-16T15:26:36Z

I'd be happy to, but my concern is around this comment: quantizor/markdown-to-jsx#435 (comment) where even type compatibility with react 18 appears to be something for the v8 release, currently only present as a WIP PR (quantizor/markdown-to-jsx#559).

~~I can re-raise the issue and see if they can be persuaded to drop type-compatibility with older React versions without a major version bump.~~

This is all nonsense (:

mrginglymus · 2024-12-16T15:39:36Z

Actually, the change seems pretty trivial so hopefully it'll be ok.

edit: quantizor/markdown-to-jsx#643

mrginglymus · 2024-12-18T08:25:36Z

@yannbf PR updated with the now fixed-at-source markdown-to-jsx

code/lib/blocks/package.json

devjiwonchoi · 2024-12-19T15:58:40Z

FYI Closes #30104

mrginglymus added 3 commits December 11, 2024 10:31

Update @radix-ui/react-dialog

1b47ea8

This fixes its usage of the global JSX namespace

Update @emotion packages to react19 type compatible versions

f49dbd9

Update @storybook/theme types to remove reference to global JSX names…

844ef0e

…pace

mrginglymus mentioned this pull request Dec 11, 2024

[Investigation]: Support React 19 #29805

Open

12 tasks

Fix mdx.tsx build error

9738e9a

yannbf added dependencies react labels Dec 14, 2024

mrginglymus marked this pull request as ready for review December 14, 2024 09:31

yannbf added the ci:merged Run the CI jobs that normally run when merged. label Dec 14, 2024

greptile-apps bot reviewed Dec 14, 2024

View reviewed changes

yannbf self-assigned this Dec 16, 2024

mrginglymus mentioned this pull request Dec 16, 2024

React 19 Type Compatibility quantizor/markdown-to-jsx#643

Merged

Update markdown-to-jsx to a compatible version

bc8d69e

mrginglymus force-pushed the r19-type-compat branch from 5acb6e1 to bc8d69e Compare December 18, 2024 08:23

yannbf reviewed Dec 18, 2024

View reviewed changes

code/lib/blocks/package.json Outdated Show resolved Hide resolved

Relax markdown-to-jsx specifier

e821e70

mrginglymus requested a review from yannbf December 18, 2024 09:19

Merge branch 'next' into r19-type-compat

a1f61f5

mrginglymus mentioned this pull request Dec 19, 2024

fix: @storybook/react types is incompatible with @types/react@19 #30102

Closed

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dependencies for React 19 type compatibility #30031

Update dependencies for React 19 type compatibility #30031

mrginglymus commented Dec 11, 2024 •

edited by storybook-pr-benchmarking bot

Loading

imjordanxd commented Dec 11, 2024

mrginglymus commented Dec 14, 2024

greptile-apps bot left a comment

yannbf commented Dec 14, 2024

greptile-apps bot left a comment

nx-cloud bot commented Dec 14, 2024 •

edited

Loading

storybook-pr-benchmarking bot commented Dec 14, 2024 •

edited

Loading

mrginglymus commented Dec 14, 2024 •

edited

Loading

yannbf commented Dec 16, 2024

mrginglymus commented Dec 16, 2024 •

edited

Loading

mrginglymus commented Dec 16, 2024 •

edited

Loading

mrginglymus commented Dec 18, 2024

devjiwonchoi commented Dec 19, 2024

Update dependencies for React 19 type compatibility #30031

Are you sure you want to change the base?

Update dependencies for React 19 type compatibility #30031

Conversation

mrginglymus commented Dec 11, 2024 • edited by storybook-pr-benchmarking bot Loading

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

imjordanxd commented Dec 11, 2024

mrginglymus commented Dec 14, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

yannbf commented Dec 14, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

nx-cloud bot commented Dec 14, 2024 • edited Loading

☁️ Nx Cloud Report

storybook-pr-benchmarking bot commented Dec 14, 2024 • edited Loading

Package Benchmarks

@storybook/core

storybook

sb

@storybook/cli

@storybook/codemod

create-storybook

mrginglymus commented Dec 14, 2024 • edited Loading

yannbf commented Dec 16, 2024

mrginglymus commented Dec 16, 2024 • edited Loading

mrginglymus commented Dec 16, 2024 • edited Loading

mrginglymus commented Dec 18, 2024

devjiwonchoi commented Dec 19, 2024

mrginglymus commented Dec 11, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Dec 14, 2024 •

edited

Loading

storybook-pr-benchmarking bot commented Dec 14, 2024 •

edited

Loading

`@storybook/core`

`storybook`

`sb`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`

mrginglymus commented Dec 14, 2024 •

edited

Loading

mrginglymus commented Dec 16, 2024 •

edited

Loading

mrginglymus commented Dec 16, 2024 •

edited

Loading