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 storybook@0.0.0-pr-30031-sha-5acb6e15 sandbox or in an existing project with npx storybook@0.0.0-pr-30031-sha-5acb6e15 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	1.22	0%
initSize	143 MB	143 MB	-38.9 kB	1.07	0%
diffSize	65.6 MB	65.6 MB	-38.9 kB	1.07	-0.1%
buildSize	7.19 MB	7.17 MB	-17.3 kB	-1.7	-0.2%
buildSbAddonsSize	1.85 MB	1.85 MB	500 B	-0.59	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.86 MB	-5.17 kB	-7234.83	-0.3%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.92 MB	3.91 MB	-4.67 kB	-1.33	-0.1%
buildPreviewSize	3.28 MB	3.26 MB	-12.6 kB	-1.78	-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	16.5s	25.9s	9.4s	2.06	🔺36.3%
generateTime	21.5s	26.8s	5.2s	2.97	🔺19.7%
initTime	16.4s	21.6s	5.1s	4.85	🔺24%
buildTime	8.3s	9.1s	784ms	-0.21	8.6%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.1s	4.9s	-145ms	-0.36	-2.9%
devManagerResponsive	3.7s	3.6s	-88ms	-0.43	-2.4%
devManagerHeaderVisible	586ms	538ms	-48ms	-0.75	-8.9%
devManagerIndexVisible	617ms	568ms	-49ms	-0.69	-8.6%
devStoryVisibleUncached	1.4s	1.3s	-172ms	-1.37	🔰-13%
devStoryVisible	618ms	574ms	-44ms	-0.72	-7.7%
devAutodocsVisible	526ms	607ms	81ms	0.31	13.3%
devMDXVisible	537ms	562ms	25ms	-0.12	4.4%
buildManagerHeaderVisible	558ms	556ms	-2ms	-0.48	-0.4%
buildManagerIndexVisible	657ms	647ms	-10ms	-0.5	-1.5%
buildStoryVisible	547ms	545ms	-2ms	-0.46	-0.4%
buildAutodocsVisible	466ms	466ms	0ms	-0.31	0%
buildMDXVisible	454ms	481ms	27ms	-0.17	5.6%

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

View your CI Pipeline Execution ↗ for commit ea33075.

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 35s	View ↗

☁️ Nx Cloud last updated this comment at 2024-12-24 15:00:06 UTC

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

Package Benchmarks

^{Commit: ea33075, ran on 24 December 2024 at 15:03:50 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.37 MB	14.37 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.84 MB	35.79 MB	🎉 -43 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	393	393	0
Self size	496 KB	496 KB	0 B
Dependency size	77.68 MB	77.63 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	67.58 MB	67.53 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.95 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

yannbf · 2024-12-27T09:48:19Z

@mrginglymus seems like some types are failing, can you check?

yarn task --task check --start-from=install --no-link --debug

@kasperpeulen can you assist if needed?

mrginglymus · 2024-12-27T11:12:43Z

Ah sorry, only just spotted those. There's some lovely weirdness where the checks are passing on Windows (except for svelte - https://cloud.nx.app/runs/nCgcPQNBdY).

Also, running with the --start-from flag is giving me an error:

TypeError: Cannot read properties of undefined (reading 'filter')
    at setUnready (...\storybook\scripts\task.ts:414:14)
    at run (...\storybook\scripts\task.ts:439:5)

on both windows and linux.

I'm stuck between not being able to build from an empty cache on windows, and the ts language service not seeming to work in WSL, so I can't offer much of a better fix than just throwing a few as const around.

Windows support might be aided by fixing these lines:

storybook/code/core/scripts/helpers/generateTypesMapperFiles.ts

Lines 16 to 17 in 3b18e74

    
               export * from '${join(upwards, downwards)}'; 
        
               export type * from '${join(upwards, downwards)}';

to add a .replaceAll(path.sep, '/'), but I'm curious as to whether storybook have considered using typescript project references to simplify the build system and avoid the need for temporary stubs

edit: #30148 raised to enhance windows support

mrginglymus · 2024-12-27T11:53:19Z

Hmm, it looks like all of these are caused by emotion-js/emotion#3164 .

The offending code looks like this:

const MyComponent = styled.xxx(() => ({
  ...
}));

ie, a styled component with no theme arg

I can see three options for fixing:

Slap an as const on it:

const MyComponent = styled.xxx(() => ({
  ...
} as const));

Remove the unecessary callback

const MyComponent = styled.xxx({
  ...
});

Raise a bug with emotion for this regression (if it is one, which I think it is...)

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

14 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

Merge branch 'next' into r19-type-compat

ea33075

yannbf assigned kasperpeulen and unassigned yannbf Dec 27, 2024

yannbf requested a review from kasperpeulen December 27, 2024 09:48

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 yannbf

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

yannbf commented Dec 27, 2024

mrginglymus commented Dec 27, 2024 •

edited

Loading

mrginglymus commented Dec 27, 2024 •

edited

Loading

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 yannbf 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

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

yannbf commented Dec 27, 2024

mrginglymus commented Dec 27, 2024 • edited Loading

mrginglymus commented Dec 27, 2024 • edited Loading

mrginglymus commented Dec 11, 2024 •

edited by yannbf

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

mrginglymus commented Dec 27, 2024 •

edited

Loading

mrginglymus commented Dec 27, 2024 •

edited

Loading