[Suggestion]: Add tsconfig.json update to React 19 upgrade guide

[JakeSaterlay]

Summary

To get the React 19 beta version working in a typescript project you have to modify your tsconfig.json types array to include react/canary.

Page

https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing

Details

To get the React 19 beta version working in a typescript project you have to add the following to your types array in the tsconfig compilerOptions object:

"types": ["react/canary"]

I couldn't see this in the upgrade guide, so could be worth adding a section to explain this is needed when working with React and Typescript

[eps1lon]

You don't need that. You can, but the recommended path is explained in https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing by using types-react@beta. Once React 19 is stable you can use @types/react again.

[JakeSaterlay]

@eps1lon hmm I did also try that approach within a project bootstrapped together within Vite however it didn't work until I added "types": ["react/canary"] in the tsconfig

[eps1lon]

Could you provide a cloneable repro for me to checkout? Sounds like you're still getting 18.x types

[tom-sherman]

Worth noting that overrides don't work in some environments eg. stackblitz stackblitz/webcontainer-core#1139

But neither does the types: react/canary trick 😕 stackblitz/webcontainer-core#1425

[tom-sherman]

/// <reference types="react/canary" />

Works as a workaround in stackblitz fyi

[JakeSaterlay]

Could you provide a cloneable repro for me to checkout? Sounds like you're still getting 18.x types

https://github.com/JakeSaterlay/react-19-types-bug

I thought I had it working, but managed to recreate it in the above repo, I can't access React-19 types without changing the tsconfig here

[eps1lon]

Issues with Stackblitz should be filed against them.

With regards to the cloneable repro: Looks like an npm bug. Clearing the lockfile, removing node_modules and running npm does install the correct types. This is the update to the lockfile that was missing:

diff --git a/package-lock.json b/package-lock.json
index d38dda6..04bb2f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,8 @@
 			"name": "react-19-bug",
 			"version": "0.0.0",
 			"dependencies": {
-				"@types/react": "npm:types-react@alpha",
-				"@types/react-dom": "npm:types-react-dom@alpha",
+				"@types/react": "npm:types-react@beta",
+				"@types/react-dom": "npm:types-react-dom@beta",
 				"react": "^19.0.0-beta-94eed63c49-20240425",
 				"react-dom": "^19.0.0-beta-94eed63c49-20240425"
 			},
@@ -1252,24 +1252,20 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
-		"node_modules/@types/prop-types": {
-			"version": "15.7.12",
-			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-			"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
-		},
 		"node_modules/@types/react": {
-			"version": "18.3.0",
-			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.0.tgz",
-			"integrity": "sha512-DiUcKjzE6soLyln8NNZmyhcQjVv+WsUIFSqetMN0p8927OztKT4VTfFTqsbAi5oAGIcgOmOajlfBqyptDDjZRw==",
+			"name": "types-react",
+			"version": "19.0.0-beta.1",
+			"resolved": "https://registry.npmjs.org/types-react/-/types-react-19.0.0-beta.1.tgz",
+			"integrity": "sha512-gQpuPdi+Gu+nIFmhnFLINkGQ4j0eRY7olV3lzncFJy2g5TfnSEFD1xU86u5KgRytFswwZ5pGEPWEizefwPaxTw==",
 			"dependencies": {
-				"@types/prop-types": "*",
 				"csstype": "^3.0.2"
 			}
 		},
 		"node_modules/@types/react-dom": {
-			"version": "18.3.0",
-			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
-			"integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+			"name": "types-react-dom",
+			"version": "19.0.0-beta.1",
+			"resolved": "https://registry.npmjs.org/types-react-dom/-/types-react-dom-19.0.0-beta.1.tgz",
+			"integrity": "sha512-fXQfv6OQOXxmgNQ7RuhX615Wx4680LqVbrEbxch+ZQ56ZDAZKXptLl3XoHaHU31Yd2xiig/VlXzohCexKXNzBQ==",
 			"dependencies": {
 				"@types/react": "*"
 			}
@@ -2818,22 +2814,22 @@
 			]
 		},
 		"node_modules/react": {
-			"version": "19.0.0-beta-94eed63c49-20240425",
-			"resolved": "https://registry.npmjs.org/react/-/react-19.0.0-beta-94eed63c49-20240425.tgz",
-			"integrity": "sha512-BPPKh5bZwcpw/Dgfh3A0MoU1GSl2edR2JggCq3QPdghQsrFg1aBuMkul5YB4rpII400RYq9VC5eF5Nm3spx0gA==",
+			"version": "19.0.0-canary-fd0da3eef-20240404",
+			"resolved": "https://registry.npmjs.org/react/-/react-19.0.0-canary-fd0da3eef-20240404.tgz",
+			"integrity": "sha512-ViGezadMIlZ5kvl1vCR1c0EqiANinvJXTDbyP4b4LIYxxPlSvOrYra9jncw7Jz4X78/8XYooms8dVlGQt4doPA==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
 		},
 		"node_modules/react-dom": {
-			"version": "19.0.0-beta-94eed63c49-20240425",
-			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0-beta-94eed63c49-20240425.tgz",
-			"integrity": "sha512-V0uHW7Xd0u/LDlmFO8sJ9TTNizAESS+pexJNOi3KbOU1taf2gUO5J8YIWis60xcQbh7YBqSklyYIIq3DfiKz3Q==",
+			"version": "19.0.0-canary-fd0da3eef-20240404",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0-canary-fd0da3eef-20240404.tgz",
+			"integrity": "sha512-MHRYMGKw12ZiBr1+c0oS0yRfD3WsO43K7w0aHsMpt3kChZo///0+C8NOu9VNiO0flvpOGho0uczbwmG2IV3XGw==",
 			"dependencies": {
-				"scheduler": "0.25.0-beta-94eed63c49-20240425"
+				"scheduler": "0.25.0-canary-fd0da3eef-20240404"
 			},
 			"peerDependencies": {
-				"react": "19.0.0-beta-94eed63c49-20240425"
+				"react": "19.0.0-canary-fd0da3eef-20240404"
 			}
 		},
 		"node_modules/react-refresh": {
@@ -2938,9 +2934,9 @@
 			}
 		},
 		"node_modules/scheduler": {
-			"version": "0.25.0-beta-94eed63c49-20240425",
-			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-beta-94eed63c49-20240425.tgz",
-			"integrity": "sha512-U8hoOV7uut5E8cMvRSMikEBBqLXfv2BpdxUsG45euaOfnqEgFrCdLLh6ydM+YBJ36+28olXMNmK2PFFzeg4UdQ=="
+			"version": "0.25.0-canary-fd0da3eef-20240404",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-canary-fd0da3eef-20240404.tgz",
+			"integrity": "sha512-XjgKmXoljRMv1h/nM75sn5Exdh0EvdkA4U1E7gHsXT2QZTplPEcT3lrS3T0pW0BEniBEExgOu7HAVu1ABVFS/A=="
 		},
 		"node_modules/semver": {
 			"version": "7.6.0",
diff --git a/package.json b/package.json
index 2ebc8c9..4bda2f3 100644
--- a/package.json
+++ b/package.json
@@ -12,12 +12,12 @@
 	"dependencies": {
 		"react": "^19.0.0-beta-94eed63c49-20240425",
 		"react-dom": "^19.0.0-beta-94eed63c49-20240425",
-		"@types/react": "npm:types-react@alpha",
-		"@types/react-dom": "npm:types-react-dom@alpha"
+		"@types/react": "npm:types-react@beta",
+		"@types/react-dom": "npm:types-react-dom@beta"
 	},
 	"overrides": {
-		"@types/react": "npm:types-react@alpha",
-		"@types/react-dom": "npm:types-react-dom@alpha"
+		"@types/react": "npm:types-react@beta",
+		"@types/react-dom": "npm:types-react-dom@beta"
 	},
 	"devDependencies": {
 		"@typescript-eslint/eslint-plugin": "^7.2.0",

[tom-sherman]

Is there something wrong with the canary types? IMO it's better to suggest a solution in the blog post that doesn't push people toward bugs in the package manager.