Core: Improve type compatibility with React 19

[mrginglymus]

Closes #30104

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.9 MB	77.9 MB	0 B	2.24	0%
initSize	131 MB	131 MB	-39 kB	1.09	0%
diffSize	53 MB	53 MB	-39 kB	0.02	-0.1%
buildSize	7.19 MB	7.17 MB	-17.4 kB	-30.49	-0.2%
buildSbAddonsSize	1.85 MB	1.85 MB	458 B	9.09	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.86 MB	-5.18 kB	-10.15	-0.3%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	-4.72 kB	-10.27	-0.1%
buildPreviewSize	3.28 MB	3.26 MB	-12.7 kB	-106.59	-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	8.3s	15.3s	6.9s	0.29	45.3%
generateTime	20.5s	19.3s	-1s -216ms	-0.82	-6.3%
initTime	13s	15.7s	2.7s	0.46	17.2%
buildTime	8.7s	9s	243ms	-0.42	2.7%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.3s	4.8s	-530ms	-0.25	-10.9%
devManagerResponsive	3.9s	3.5s	-328ms	0.1	-9.2%
devManagerHeaderVisible	616ms	630ms	14ms	0.79	2.2%
devManagerIndexVisible	649ms	672ms	23ms	0.66	3.4%
devStoryVisibleUncached	2.2s	2s	-226ms	0.43	-11.3%
devStoryVisible	650ms	725ms	75ms	2.11	🔺10.3%
devAutodocsVisible	554ms	532ms	-22ms	0.18	-4.1%
devMDXVisible	583ms	514ms	-69ms	-0.22	-13.4%
buildManagerHeaderVisible	682ms	582ms	-100ms	0.16	-17.2%
buildManagerIndexVisible	776ms	675ms	-101ms	0.16	-15%
buildStoryVisible	655ms	568ms	-87ms	0.21	-15.3%
buildAutodocsVisible	505ms	456ms	-49ms	-0.38	-10.7%
buildMDXVisible	556ms	571ms	15ms	2.04	2.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
• Simplified styled-components definitions across multiple files by removing unnecessary arrow function wrappers

_{💡 (2/5) Greptile learns from your feedback when you react with 👍/👎!}

[imjordanxd]

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

[mrginglymus]

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]

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]

View your CI Pipeline Execution ↗ for commit 73a49c2.

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

---

☁️ Nx Cloud last updated this comment at 2025-01-27 08:56:12 UTC

[storybook-pr-benchmarking]

Package Benchmarks

^{Commit: 73a49c2, ran on 27 January 2025 at 09:05:10 UTC}

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

@storybook/core

	Before	After	Difference
Dependency count	54	54	0
Self size	19.09 MB	19.04 MB	🎉 -43 KB 🎉
Dependency size	14.44 MB	14.44 MB	0 B
Bundle Size Analyzer	Link	Link

storybook

	Before	After	Difference
Dependency count	55	55	0
Self size	22 KB	22 KB	0 B
Dependency size	33.53 MB	33.49 MB	🎉 -43 KB 🎉
Bundle Size Analyzer	Link	Link

sb

	Before	After	Difference
Dependency count	56	56	0
Self size	1 KB	1 KB	0 B
Dependency size	33.55 MB	33.51 MB	🎉 -43 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	399	399	0
Self size	503 KB	503 KB	0 B
Dependency size	75.59 MB	75.54 MB	🎉 -43 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	277	277	0
Self size	612 KB	612 KB	0 B
Dependency size	65.39 MB	65.35 MB	🎉 -43 KB 🎉
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	113	113	0
Self size	1.11 MB	1.11 MB	0 B
Dependency size	42.66 MB	42.62 MB	🎉 -43 KB 🎉
Bundle Size Analyzer	Link	Link

[mrginglymus]

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]

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]

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]

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

edit: quantizor/markdown-to-jsx#643

[mrginglymus]

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

[mrginglymus]

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]

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:

1. Slap an as const on it:

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

2. Remove the unecessary callback

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

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

[yannbf]

Thank you so much for all of your findings @mrginglymus! About the check command, I gave you the wrong one, it shouldn't have the --start-from=install flag, sorry about that.

Regarding the issue, I fixed the styled components ones, and the check command should be passing now.

[mrginglymus]

Thanks for the updates @yannbf! I'll look into those test failures now.

edit: passes on my machine 😕 - is there some known flakiness on those tests?

[mrginglymus]

Ah, the circle CI output is particularly unhelpful - where should I be looking for test results?

This appears to be the issue:

 FAIL  |storybook-ui| ../addons/test/src/components/GlobalErrorModal.stories.tsx > Default
Error:
Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/addons-test-globalerrormodal--default&addonPanel=storybook/test/panel

error: `DialogContent` requires a `DialogTitle` for the component to be accessible for screen reader users.

If you want to hide the `DialogTitle`, you can wrap it with our VisuallyHidden component.

For more information, see https://radix-ui.com/primitives/docs/components/dialog
 ❯ throwMessage ../vitest-setup.ts:18:17
 ❯ console.throwError ../vitest-setup.ts:24:33

---

edit: suppressed for now; if merged I'll raise an issue to unsuppress and fix

[mrginglymus]

@yannbf @kasperpeulen I've rolled the dice enough to get a green run ;) - do you think this will make it into 8.5? Cheers!

[mrginglymus]

@storybook/icons could do with a bump to ^1.3.0 for r19 type compat - not essential as users can change that themselves.

[greptile-apps]

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

[greptile-apps]

logic: The ts-expect-error here suggests there may be a legitimate type mismatch between the status types. This should be investigated to determine if it's a bug or if the types need to be aligned.