React-router: Invariant violation after update to react-router 4.4.0

[Cherviakov]

Version

4.4.0

Steps to reproduce

webpack build
run with wepback-dev-server
Get Invariant violation: cannot use Route or wirhRouter() outside of Router

Expected Behavior

No error, as nothing else changed but version of react-router and react-router-dom packages

Actual Behavior

index.js:19 Uncaught Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
    at e.exports (http://localhost:3026/bundle.js:60529:55135)
    at a.computeMatch (http://localhost:3026/bundle.js:60607:26236)
    at new a (http://localhost:3026/bundle.js:60607:25553)
    at constructClassInstance (http://localhost:3026/bundle.js:208481:18)
    at updateClassComponent (http://localhost:3026/bundle.js:211807:5)
    at beginWork (http://localhost:3026/bundle.js:212764:16)
    at performUnitOfWork (http://localhost:3026/bundle.js:216432:12)
    at workLoop (http://localhost:3026/bundle.js:216472:24)
    at HTMLUnknownElement.callCallback (http://localhost:3026/bundle.js:197315:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3026/bundle.js:197365:16)

[darkadept]

I just discovered the exact same problem with my code.

[pshrmn]

That error _should_ happen when you're using the <Route> in the wrong place.

Assuming that the <Route> is in the right place (e.g. you're updating a package that worked fine in 4.3), it is possible that you currently have multiple versions of dependencies installed, which could cause context issues. Can you try doing a full re-install (deleting node_modules first).

[joeltaylor]

It may be worth double checking your versions. I got surprised by an unintended upgraded to 4.4.0 (expected 4.2.2) due to how react-router requires its dependencies that caused a similar error.

[darkadept]

My problem could be that I have multiple versions of react-router-dom. I will investigate further.

[StringEpsilon]

Using multiple versions of react-router and or react-router-dom will definitely cause issues like that.

You can't use react-router 4.3 with react-router-dom 4.4 or vice versa. (Edit: writing it out like that: Why isn't that considered a breaking change?)

Your build process might also cause some issues in that regard. Particularly if you have imports pointing at both "react-router" and "react-router-dom" in your codebase. Compare with #6581.

[Cherviakov]

I have react-router and react-router-dom in my project and two packages used, npm update makes this dependency updated everywhere but I think that problem actually in built packages, those bundles built on previous version therefore indeed it can be version conflict.

[kostozy]

React router dom (v4.3.1) requires react-router v4.4.0. But in the main package react-router v is 4.3.1. So, my solution is to change version of react-router in shrinkwrap to 4.3.1. Please check dependency versions

[nick]

I fixed this by ensuring I imported withRouter from 'react-router-dom' everywhere in my code. Before I had been importing from 'react-router' in some places and 'react-router-dom' in others.

[leoyli]

I tried to search the changelog, but looks the doc haven't catch up?!

[zaklampert]

browser.js:38 Uncaught Invariant Violation: You should not use <Link> outside a <Router>
...

The above error occurred in the <Context.Consumer> component:
    in Link
    in div
    in Qc (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
...

Link is a child of BrowserRouter in my app, as you can see from the second error. Using react-router and react-router-dom 4.4.0, react and react-dom 16.8.4

[Cherviakov]

@zaklampert

npm list react-router react-router-dom 

and then, if by chance you reside on *nix

 cd mySource; grep -rnw . -e 'withRouter' 

[mjackson]

I'm pretty sure this is a duplicate of #6630. Your react-router-dom package is probably pulling in react-router 4.4.0. I have already described some workarounds that you can take for now, but we are working on a more permanent fix.

Let's follow up there.

[mccambridge]

I'm getting this error when I import a component from one of our internal packages that contains a Route or Link component. Though this component is located externally, it's always a descendant of our component tree way under the Router component. If I move the component to a local file in the project, suddenly it works without a single code change. This is causing me all kinds of problems. Not sure why the Invariant violation would fire in this case.

[alexanderturinske]

I am seeing the same thing as @mccambridge; Upgrading to 5.0.0 did not fix the issue; locking to 4.3.1 fixes the issue. Verified that I was not mixing import statements, as described in the 4.4.0-beta.1 release notes

[Cherviakov]

Same as @mccambridge experience same kind of error, after updating both packages and main project react-router and react-router-dom version to 5.0.0. Returning back to 4.3.1 make things working.

[taschetto]

@mccambridge @alexanderturinske @Cherviakov I've fixed it by deleting node_modules and doing a yarn (or npm install if you will). Using v5.0.0 of react-router-dom.

[Cherviakov]

@taschetto you using ReactRotuer in your main project and in written by you packages, which you use in your project? It is working normally in single project, but when you add packages then seems somehting goes wrong between [email protected] in main project and in package. This is why in our case we have to fallback to v4.3.1

[simoncoulton]

I still had this occurring on v5, had to downgrade to 4.3.1 to get it working again as well.

[ViggoV]

I am having this issue after updating to [email protected]. It happens when I have a subroute in a project which is imported from a submodule. Both projects are using the same react (16.8.6) and react-router-dom (5.0.0) versions. @taschetto your solution didn't work but did appear to change the error message so it says rather than , which is more correct in this case so progress I guess..

[josephmcasey]

Ditto here, upgrading from 4.3.1 to 5.0.0 without making any changes to the project caused:
Invariant failed: You should not use <Switch> outside a <Router>

I'm using connected-react-router in place of my <Router/>.

[ViggoV]

I ended up using npm locally instead of submodules and then added react-router as a peer dependency in my sub-project, if that helps anyone.

[chulanovskyi]

For everyone, who are trying to use the exact versions (4.3.1) as a workaround and still have their builds failing - please make sure you are NOT using npm to install packages. Use yarn.
Just to clarify, while having the exact "react-router-dom": "4.3.1" and the:

"resolutions": {
    "react-router-dom": "4.3.1",
    "react-router": "4.3.1"
  },

in my *package.json`, I've tried both options:

• when you use npm i it will end up installing the react-router 4.4 version, disregarding the resolutions config. Because in the package.json of the react-router-dom it has a _caret_ near the react-router dependency - "^4.3.1". Here is the resulted package.json of the resolved react-router

• when you use yarn - the proper version that is described in the resolutions sections is installed.

[crobinson42]

@mccambridge I'm having the same issue when upgrading from 4.3.1 to 5.0.1 when a common components package is imported that has a component that contains a NavLink it breaks everything with Uncaught Invariant Violation: You should not use <Route> or withRouter() outside a <Router> - did you resolve this in any way?

I opened #6769

[WeiGrand]

For everyone, who are trying to use the exact versions (4.3.1) as a workaround and still have their builds failing - please make sure you are NOT using npm to install packages. Use yarn.
Just to clarify, while having the exact "react-router-dom": "4.3.1" and the:

"resolutions": {
    "react-router-dom": "4.3.1",
    "react-router": "4.3.1"
  },

in my *package.json`, I've tried both options:

• when you use npm i it will end up installing the react-router 4.4 version, disregarding the resolutions config. Because in the _package.json_ of the react-router-dom it has a _caret_ near the react-router dependency - "^4.3.1". Here is the resulted package.json of the resolved react-router
• when you use yarn - the proper version that is described in the _resolutions_ sections is installed.

Works for me, thanks