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

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)

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 13
Comments: 24 (3 by maintainers)

Most upvoted comments

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

+11

alexanderturinske on Mar 19, 2019

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.

ghost on Mar 27, 2019

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

simoncoulton on Apr 26, 2019

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

josephmcasey on May 13, 2019

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.

mccambridge on Mar 19, 2019

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.

mjackson on Mar 18, 2019

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.

chulanovskyi on May 17, 2019

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

taschetto on Apr 25, 2019

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

zaklampert on Mar 18, 2019