Comments (8)
tom-sherman
commented on May 9, 2024
1
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.
from reactjs.org.
eps1lon
commented on May 9, 2024
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.
from reactjs.org.
JakeSaterlay
commented on May 9, 2024
@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
from reactjs.org.
eps1lon
commented on May 9, 2024
Could you provide a cloneable repro for me to checkout? Sounds like you're still getting 18.x types
from reactjs.org.
tom-sherman
commented on May 9, 2024
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
from reactjs.org.
tom-sherman
commented on May 9, 2024
/// <reference types="react/canary" />Works as a workaround in stackblitz fyi
from reactjs.org.
JakeSaterlay
commented on May 9, 2024
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
from reactjs.org.
eps1lon
commented on May 9, 2024
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",
from reactjs.org.
Related Issues (20)
- Not Found
- [Bug]: the hydrate-mismatch link seems not right HOT 4
- GENERATE_SOURCEMAP=false Issue HOT 1
- Worflow Automator Issues
- [Bug]: Excessive Requests for Page Data - Why Does This Happen?
- links to "use server" and "use client" docs are broken on directive page docs
- directives page is not found HOT 1
- 'use server' reference page does not exist in the doc HOT 1
- Use-server documentation URL broken HOT 2
- references/react-dom/components/button link in 20240425 blog post results to Not Found page HOT 2
- [Typo]: No mention of isPending in return values of useActionState
- [Typo]: ιζ©statη»ζζη»ηζ‘ιθ―― HOT 1
- [Typo]: In code example of server actions
- [Bug]: Visual bug on main page
- flipksrrt
- single-file-example.html link broken HOT 5
- [Typo]: Cannot debug the react source code through 'babel-standalone/dev.html' file HOT 2
- [Bug]: missing redirect for feed.xml HOT 2
- [Suggestion]: Start a New React Project page should tell you how to start a new react project HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactjs.org.