-
-
Notifications
You must be signed in to change notification settings - Fork 10.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: v5 components with React 18 & TypeScript result in "cannot be used as a JSX component" #8794
Comments
This isn't a React Router bug. It's caused by @types/react. This might be a fix: facebook/react#24304 (comment) |
Sure, downgrading types makes the problem go away at 'compile' time, but routing still doesn't work; clicking any link just does nothing. Maybe @types/react is a red herring and mentioning them in the issue was misleading. Not sure if the actual issue is similar to #7870 but, in any case, I just wanted to flag that React Router v5 doesn't seem to be very happy with React 18. Not sure if v6 has the same issue, but upgrading to v6 is just not feasible for a lot of us right now... not until there's feature parity with v5 (for us, the blocker is #8139 and this comment suggests v5 is still supported). Just to clarify, I'm not in any rush to upgrade to React 18, nor 'demanding' any fixes. Just thought I'd flag it since I came across this behaviour. I would also be very happy to contribute to a fix if you could point me to right direction 😎 |
The backwards compatibility layer doesn't seem to have the Prompt feature. So its not viable for us. My vote is also for re-opining this issue. |
Agreed, this should be reopened based on this. Thanks! |
@timdorr could you please reply why this issue remains closed? As long as Prompt is not implemented in v6, it's not an option for us to upgrade. Which now also means we can't use React 18. |
Hi guys, from the comments I assume that this is still an issue right? React router v5 is still not compatible with React 18. We can't really update to v6 - we always try to add it (task to update/re-check the current status) to some not that packed sprints, spend few days on it - just to rollback to v5 because something just doesn't work, as pointed in previous comments. 😢 |
v5 works just fine with React 18: https://stackblitz.com/edit/react-routing-examples-paxyww?file=index.js The errors you're getting here are TypeScript-related and not related to either React or React Router directly. Neither v5 nor React itself provide types (they come from DefinitelyTyped). Hence, the errors you're seeing are related to external issues in the DT types. This remains closed because there's nothing to do here. |
Even if you work around the typing issues, it still doesn't work in our case (clicking links does does nothing for example). Does anyone know of decent alternatives to react-router? |
Hey folks! This issue seems to have split into a few parallel discussions so I'd like to split them out for clarity and make sure that we're able to discuss them individually:
|
@brophdawg11 I was experiencing the same issue as @polys. The bug report mentions a patch for this issue. So I was able to solve this by installing react-router-dom@5.3.3 and can confirm navigation works with react@18.0.0 @polys Perhaps this can help you as well, with the non-working navigation. Cheers |
@timdorr can you elaborate on why you think this is an issue with @types/react, as opposed to @types/react-router-dom? It looks like MemoryRouter (and other things) are not typed to accept children. There was indeed a (maddening) change with @types/react whereby children is no longer implicitly valid. But isn't the fix for the @types/react-router-dom package to have components like MemoryRouter switch to FC.PropsWithChildren or whatever it is? |
Oh my gawwwwwd @types/react-router-dom is pulling in its own version of @types/react-router into its own local node_modules. The version it's pulling in is old. This appears to be fixed in latest. A simple yarn resolution should fix this yassssss. Sorry to bother everyone, and thanks to whomever applied the very fix I described above :) |
@arackaf - how did you identify this was the case? |
@callagga by looking in my node_modules at the RR typings installed. |
@arackaf In which version is it fixed? I mean: is it fixed in a v5 version? I'm on 5.3.3 and running into the mentioned problem.
Does this mean there is a bug in v5 after all? |
I was running into this same issue when I upgraded my React Router version; deleting my If you're uncomfortable with and/or can't delete your lockfile, digging into it and manually changing the version of |
I resolve this issue is: import { Redirect as RouterRedirect } from 'react-router-dom'
import type { RedirectProps } from 'react-router-dom'
const Redirect = (RouterRedirect as unknown) as React.ComponentClass<RedirectProps>
<Redirect to="http://link.com" /> |
This comment was marked as duplicate.
This comment was marked as duplicate.
We had this issue, and were able to resolve it by making sure we had only one version of the following packages installed - in our case:
Might be a different setup for you, but in our case: we have a lerna monorepo setup with yarn and we can check the installed versions by running The way to force all dependencies to use the same version of a package is to specify that in your Hope that helps! |
What version of React Router are you using?
5.2.0
Steps to Reproduce
Just use v5 with React 18 and TypeScript.
Expected Behavior
It works.
Actual Behavior
Results in:
The text was updated successfully, but these errors were encountered: