search

reach / router

https://reach.tech/router
MIT License
6.91k stars 326 forks source link

Reach Router fails to install on React version 17.0.2 #494

Closed gssakash closed 4 months ago

gssakash commented 2 years ago

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.

image

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

claymcleod commented 2 years ago

+1 we also get this issue

ajereos-circadence commented 2 years ago

+1 same

plastikfan commented 2 years ago

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

NehalJadav commented 2 years ago

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 commented 2 years ago

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

plastikfan commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

whyboris commented 2 years ago

@redabacha had a solution that worked for me: https://github.com/reach/router/issues/494#issuecomment-1001081918

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

mluce194 commented 1 year ago

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 commented 1 year ago

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

v88jette commented 4 months ago

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