fix: support react 19 type definitions #8121

stipsan · 2024-12-20T13:30:42Z

Description

On React 19 I'm seeing build errors like this:

Type error: Argument of type 'ComponentType | ReactNode' is not assignable to parameter of type 'ReactNode | ComponentType<{}>'.
  Type 'ComponentClass<{}, any>' is not assignable to type 'ReactNode | ComponentType<{}>'.
    Type 'import("/vercel/path1/node_modules/@sanity/types/node_modules/@types/react/index").ComponentClass<{}, any>' is not assignable to type 'React.ComponentClass<{}, any>'.
      Types of property 'contextType' are incompatible.
        Type 'import("/vercel/path1/node_modules/@sanity/types/node_modules/@types/react/index").Context<any> | undefined' is not assignable to type 'React.Context<any> | undefined'.
          Property '$$typeof' is missing in type 'import("/vercel/path1/node_modules/@sanity/types/node_modules/@types/react/index").Context<any>' but required in type 'React.Context<any>'.

And since @sanity/types has a direct dependency on @types/react there isn't an easy to solve it, userland has to resort to package manager overrides 😅
It's always been bad to have direct deps on types that can have different majors that are incompatible, so the fix is to move it to a peer dep.

What to review

Makes sense?

Testing

If it builds it works.

Notes for release

Improves React 19 compatibility for TypeScript users, by moving the @types/react direct dependency in @sanity/types, to a peer dependency.

vercel · 2024-12-20T13:30:46Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 20, 2024 3:48pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 20, 2024 3:48pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 20, 2024 3:48pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 20, 2024 3:48pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Dec 20, 2024 3:48pm

github-actions · 2024-12-20T13:35:06Z

No changes to documentation

github-actions · 2024-12-20T13:40:44Z

Component Testing Report Updated Dec 20, 2024 3:39 PM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 5s	15	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	12s	3	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	38s	6	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	50s	11	7
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	27s	6	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	14s	3	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	26s	6	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 6s	15	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 27s	21	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 39s	18	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	13s	3	9
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	26s	6	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 42s	21	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3

github-actions · 2024-12-20T13:42:57Z

⚡️ Editor Performance Report

Updated Fri, 20 Dec 2024 15:41:42 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	21.3 efps (47ms)	26.3 efps (38ms)	-9ms (-19.1%)	✅
article (body)	63.3 efps (16ms)	65.4 efps (15ms)	-0ms (-/-%)	✅
article (string inside object)	25.0 efps (40ms)	25.6 efps (39ms)	-1ms (-2.5%)	✅
article (string inside array)	21.7 efps (46ms)	23.8 efps (42ms)	-4ms (-8.7%)	✅
recipe (name)	52.6 efps (19ms)	58.8 efps (17ms)	-2ms (-10.5%)	✅
recipe (description)	58.8 efps (17ms)	66.7 efps (15ms)	-2ms (-11.8%)	✅
recipe (instructions)	99.9+ efps (5ms)	99.9+ efps (6ms)	+1ms (-/-%)	✅
synthetic (title)	19.2 efps (52ms)	19.4 efps (52ms)	-1ms (-1.0%)	✅
synthetic (string inside object)	18.9 efps (53ms)	20.8 efps (48ms)	-5ms (-9.4%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	47ms	52ms	92ms	527ms	933ms	11.3s
article (body)	16ms	17ms	29ms	160ms	217ms	5.3s
article (string inside object)	40ms	42ms	49ms	171ms	154ms	7.0s
article (string inside array)	46ms	49ms	53ms	359ms	412ms	7.8s
recipe (name)	19ms	21ms	25ms	42ms	0ms	6.9s
recipe (description)	17ms	19ms	21ms	29ms	0ms	4.4s
recipe (instructions)	5ms	7ms	8ms	9ms	0ms	3.1s
synthetic (title)	52ms	55ms	69ms	315ms	605ms	14.2s
synthetic (string inside object)	53ms	56ms	70ms	365ms	751ms	8.5s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	38ms	41ms	51ms	472ms	207ms	11.8s
article (body)	15ms	19ms	33ms	89ms	200ms	5.4s
article (string inside object)	39ms	42ms	47ms	184ms	146ms	6.7s
article (string inside array)	42ms	46ms	55ms	312ms	429ms	7.4s
recipe (name)	17ms	19ms	22ms	34ms	0ms	6.9s
recipe (description)	15ms	17ms	18ms	32ms	0ms	4.3s
recipe (instructions)	6ms	7ms	8ms	25ms	0ms	3.1s
synthetic (title)	52ms	54ms	57ms	286ms	571ms	12.7s
synthetic (string inside object)	48ms	50ms	58ms	436ms	122ms	7.9s

📚 Glossary

column definitions

benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".

latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.

p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.

p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.

p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.

blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.

test duration — how long the test run took to complete.

packages/@sanity/types/package.json

Co-authored-by: Carolina Gonzalez <[email protected]>

stipsan requested a review from a team as a code owner December 20, 2024 13:30

stipsan requested review from cngonzalez and removed request for a team December 20, 2024 13:30

stipsan enabled auto-merge December 20, 2024 13:32

vercel bot deployed to Preview – page-building-studio December 20, 2024 13:34 View deployment

vercel bot deployed to Preview – performance-studio December 20, 2024 13:35 View deployment

vercel bot deployed to Preview – test-studio December 20, 2024 13:37 View deployment

vercel bot deployed to Preview – test-next-studio December 20, 2024 13:43 View deployment

bjoerge reviewed Dec 20, 2024

View reviewed changes

packages/@sanity/types/package.json Outdated Show resolved Hide resolved

fix: support react 19 type definitions

9118ca9

stipsan force-pushed the fix-typings-for-react-19 branch from e32c79a to 9118ca9 Compare December 20, 2024 14:14

vercel bot deployed to Preview – performance-studio December 20, 2024 14:29 View deployment

vercel bot deployed to Preview – page-building-studio December 20, 2024 14:30 View deployment

vercel bot deployed to Preview – test-studio December 20, 2024 14:36 View deployment

vercel bot deployed to Preview – test-next-studio December 20, 2024 14:43 View deployment

Merge branch 'next' into fix-typings-for-react-19

49f0e6f

vercel bot deployed to Preview – page-building-studio December 20, 2024 15:39 View deployment

vercel bot deployed to Preview – performance-studio December 20, 2024 15:39 View deployment

vercel bot deployed to Preview – test-studio December 20, 2024 15:40 View deployment

bjoerge approved these changes Dec 20, 2024

View reviewed changes

stipsan added this pull request to the merge queue Dec 20, 2024

Merged via the queue into next with commit 8e29ec5 Dec 20, 2024
54 of 55 checks passed

stipsan deleted the fix-typings-for-react-19 branch December 20, 2024 15:40

vercel bot deployed to Preview – test-next-studio December 20, 2024 15:48 View deployment

binoy14 pushed a commit that referenced this pull request Dec 20, 2024

fix: support react 19 type definitions (#8121)

ac26a4f

Co-authored-by: Carolina Gonzalez <[email protected]>

gadcam mentioned this pull request Dec 30, 2024

Sanity and Next.js 15 #7705

Open

stipsan mentioned this pull request Jan 3, 2025

fix: React 19 typings (finally) #8171

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: support react 19 type definitions #8121

fix: support react 19 type definitions #8121

stipsan commented Dec 20, 2024

vercel bot commented Dec 20, 2024 •

edited

Loading

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024 •

edited

Loading

github-actions bot commented Dec 20, 2024 •

edited

Loading

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

fix: support react 19 type definitions #8121

fix: support react 19 type definitions #8121

Conversation

stipsan commented Dec 20, 2024

Description

What to review

Testing

Notes for release

vercel bot commented Dec 20, 2024 • edited Loading

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024 • edited Loading

github-actions bot commented Dec 20, 2024 • edited Loading

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

vercel bot commented Dec 20, 2024 •

edited

Loading

github-actions bot commented Dec 20, 2024 •

edited

Loading

github-actions bot commented Dec 20, 2024 •

edited

Loading