Reach Router fails to install on React version 17.0.2

[gssakash]

Hi, I noticed that the Reach Router NPM package fails to install on React version 17.0.2 and I wanted to let you guys know about this issue.
I'm attaching a screenshot below of the error thrown when I tried to install this package.
Please let me know if you need any more details, hoping this gets fixed soon.

P.S. This was a React project created using the create react app template with no modifications to the code.

[claymcleod]

+1 we also get this issue

[ajereos-circadence]

+1 same

[plastikfan]

Are there any workarounds for this issue? Without this being resolved, I can't complete this tutorial: Securing Gatsby With Auth0

[NehalJadav]

Maybe this issue is happening in Linux OS,
Temporary solution until reach router support latest version of React.

Rename or Remove node_modules and package-lock.json, then run this command
sudo npm install --save --legacy-peer-deps

My website is in gatsbyjs and its working perfectly fine.

[redabacha]

try using gatsby's forked version of this project via the @gatsbyjs/reach-router package instead.

[plastikfan]

I got round this issue by replacing reach router with react router v6, although the interface is a bit different and requires code modifications. Apparently react router v6 is the replacement for reach router so it's the recommended route to go down rather than using short term workarounds on reach router. Here is a useful blog article that explains how to migrate: https://dev.to/gabrlcj/react-router-v6-some-of-the-new-changes-181m

[domdomegg]

If you're hitting this issue with the strict enforcement of legacy peer dependencies, you'll probably get an error that looks like:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: @you/your-project@1.0.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
npm ERR! node_modules/@reach/router
npm ERR!   @reach/router@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

To fix this properly (i.e. without using --legacy-peer-deps), as per @redabacha's suggestion you can use @gatsbyjs/reach-router instead, which is a drop-in replacement with React 17+ support. The typings have just been added for this module so you can use it in TypeScript projects too.

1. Uninstall reach router with npm uninstall @reach/router
2. Install Gatsby version with npm install @gatsbyjs/reach-router
3. (if using TypeScript) Install typings with npm i @types/gatsbyjs__reach-router
4. Replace any imports of @reach/router with @gatsbyjs/reach-router in your project

[lanesawyer]

Another solution that doesn't require switching to the gatsbyjs fork is to check the version of Node and NPM you're using.

I saw this error when running v14 of Node with the latest version of NPM (8.6.0). When I switched to using Node v16 and the NPM currently shipping with it (8.5.5), the error went away.

[nanomighty]

This is also a problem for the newest version of React @18.0.0

[whyboris]

@redabacha had a solution that worked for me: #494 (comment)

Just in case I did delete node_modules along with package-lock.json before doing a full install 🤷
but it worked for me 👍 😁 👍

[mluce194]

I have the same issue with GatsbyJS and React @18.2.0. I tried using --legacy-per-deeps and --force but it did not solve the issue.
I also tried switching to @gatsbyjs/reach-router but it created another issue.
I am not sure what to do now.
[EDIT] I solved the issue by switching to Node 16 ans NPM 8.5

[Mohosin999]

@gatsbyjs/reach-router is working perfectly,,,, you can use it

[v88jette]

@gatsbyjs/reach-router worked for me with React v18.2.0, NPM v8.19.4, and Node v16.20.2