Skip to content
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

Closed
polys opened this issue Apr 14, 2022 · 20 comments
Labels

Comments

@polys
Copy link

polys commented Apr 14, 2022

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:

'Router' cannot be used as a JSX component.
  Its instance type 'Router' is not a valid JSX element.

'Route' cannot be used as a JSX component.
  Its instance type 'Route<{}, "/test/...">' is not a valid JSX element.

'Redirect' cannot be used as a JSX component.
  Its instance type 'Redirect' is not a valid JSX element.
@polys polys added the bug label Apr 14, 2022
@timdorr
Copy link
Member

timdorr commented Apr 14, 2022

This isn't a React Router bug. It's caused by @types/react. This might be a fix: facebook/react#24304 (comment)

@timdorr timdorr closed this as completed Apr 14, 2022
@polys
Copy link
Author

polys commented Apr 18, 2022

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 😎

@Swizec
Copy link

Swizec commented Apr 30, 2022

Can this be reopened? The issue is a real problem when upgrading React, if you don't have time to also update React Router. Plus this warning makes it seem like we shouldn't ...

CleanShot 2022-04-29 at 17 15 12@2x

@Mario-Eis
Copy link

Mario-Eis commented May 3, 2022

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.

@LeandroDG
Copy link

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!

@sjoerdsmink
Copy link

@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.

@petrvecera
Copy link

petrvecera commented Jul 25, 2022

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. 😢

@timdorr
Copy link
Member

timdorr commented Jul 27, 2022

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.

@polys
Copy link
Author

polys commented Jul 28, 2022

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?
v6 isn't an option for us, and based on the above comment, staying on v5 isn't either I guess.

@brophdawg11
Copy link
Contributor

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:

  1. react-router v5 doesn't work with react 18
    • This is not the case as shown in Tim's stackblitz linked above
  2. react-router v5 doesn't work with react 18 and typescript
    • As Tim mentioned above the TS issues are from the external typings so there's not really anything for react-router v5 to do so if that's still an issue there may need to be an issue opened on the DefinitelyTyped repo
  3. v6 doesn't have <Prompt>
    • This is currently the case and there's an open issue for that in [V6] [Feature] Getting usePrompt and useBlocker back in the router #8139, so I would move any prompt related discussions over there
    • There's a lot of new functionality coming in 6.4.0 that impacts the best way to do something like a prompt/blocker feature so we need to let those land and make sure we're getting the right API for that type of UX.
  4. @polys For your "clicking links does nothing" case - could you provide a reproduction in a fresh issue? The links in Tim's stackblitz above seem to work fine with react-router v5 and react 18, so I'm unclear on what specific issue you're facing?

@boy-bizzmine
Copy link

boy-bizzmine commented Jul 28, 2022

@brophdawg11 I was experiencing the same issue as @polys.
I've only just found out, that in my case, it's linked to this: #7870 . When the router was nested in Reacts' StrictMode, the url would change, but the view won't update.

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

@arackaf
Copy link

arackaf commented Aug 5, 2022

@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?

@arackaf
Copy link

arackaf commented Aug 5, 2022

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 :)

@callagga
Copy link

callagga commented Aug 9, 2022

@arackaf - how did you identify this was the case?

@arackaf
Copy link

arackaf commented Aug 10, 2022

@callagga by looking in my node_modules at the RR typings installed.

@mnieber
Copy link

mnieber commented Sep 20, 2022

@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.

The version it's pulling in is old.

Does this mean there is a bug in v5 after all?

@remix-run remix-run deleted a comment from imfunniee Dec 6, 2022
@nathanhleung
Copy link

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 :)

I was running into this same issue when I upgraded my React Router version; deleting my yarn.lock and reinstalling with yarn fixed it (I think what happened was when I reinstalled, @types/react-router-dom started pulling in the latest React types instead of the old version that was pinned in the lockfile).

If you're uncomfortable with and/or can't delete your lockfile, digging into it and manually changing the version of @types/react that @types/react-router-dom installs is probably your best bet

@chenxiaochun
Copy link

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" />

@AnderssonChristian

This comment was marked as duplicate.

@juiceo
Copy link

juiceo commented Sep 26, 2023

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:

react: 18.2.0
react-dom: 18.2.0
react-router-dom: 5.3.4
@types/react: 18.2.22
@types/react-dom: 18.2.7
@types/react-router-dom: 5.3.3

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 yarn list package-name at the repo root. If the command prints many different versions for one of the above packages, that might be your problem.

The way to force all dependencies to use the same version of a package is to specify that in your yarn.lock or package-lock.json. A handy tool for that is yarn-deduplicate

Hope that helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests