react-router: bug: react router dom 4.3.1 pulling react-router 4.4.0 changes after latest publish

Quick update for anyone who’s watching this issue: I just unpublished 4.4.0 and re-released it as 5.0.0. v5 should be out as soon as https://travis-ci.org/ReactTraining/react-router/jobs/507926860 finishes.

Can confirm this bug with both yarn 1.15.2 and npm 6.9.0.

Curiously, codesandbox doesn’t have this issue.

Reproduction: https://github.com/StringEpsilon/react-router-bug-6630 (npm i; npm run start)

Edit: As a workaround, you can simply add

"react-router": "4.3.1",

or more explicetly:

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

to your package.json.

Apologies for the breakage here. You should not use react-router-dom version 4.3.1 with react-router 4.4.0. I assumed (incorrectly) that when people started using react-router 4.4.0 they would also be using react-router-dom 4.4.0, but as @pshrmn pointed out react-router-dom isn’t pinned to react-router 4.3.1, as it probably should be.

There are 2 things you can do:

1. You can pin your react-router version to 4.3.1 (using npm i react-router@4.3.1) so that you’ll have the correct version or
2. You can upgrade both to 4.4.0. There were no breaking changes to our public API in 4.4.0 (it’s a minor release), so the upgrade should be very straightforward. The easiest way for you to do this will be to remove your locally installed version of react-router-dom and react-router and just reinstall. Assuming you have { "react-router-dom": "^4.3.1" } in your package.json, you’ll automatically get version 4.4.0 and everything should work as before (with warnings for deprecated stuff).

Honestly, I’m kind of stumped about how to really “fix” this situation. Options are:

• a) do nothing. Everyone who is using 4.3.1 will end up here on this thread and they’ll have to take one of the options above, and I’ll get a bunch of hate mail.
• b) Re-release 4.3.1 as 4.5.0 so that everyone who is using 4.3.1 right now will get a no-op upgrade. Then re-release 4.4.0 as 5.0.0 so people on 4.x will not automatically get the new version. The people who would be most negatively affected in this situation would be anyone who has already upgraded to 4.4.0, because they would essentially revert back to 4.3.1. But that shouldn’t be a huge problem since they are API compatible. Then they would have to explicitly upgrade to 5.0.0 in order to get the new release.
• c) Re-release 4.3.1 as 4.5.0 (with pinned version numbers!) and re-release 4.4.0 as 4.6.0-beta.0. We would need to wait a while to give everyone time to get on 4.5.0 before publishing 4.6.0. This is bound to fail since some people won’t get there for a long time. But people who are interested in getting the new stuff can npm i react-router-dom@next in the interim.

I’m honestly not sure which path is less pain for people at this point. (b) is kinda weird because usually major version bumps are done only for breaking changes (though one could possibly make the argument that using the new context API is a breaking change), but I think it might be the best option. With (b) everyone who hasn’t already hit this bug will never need to know about it, and people who are interested in using the new stuff will have a path forward.

Any other options y’all can think of?

@zaklampert Is there a chance you’re importing from 2 different builds of the router? I don’t know how your build is setup, but with the new context API if you’re pulling from 2 different builds you won’t get the same instance of the RouterContext object in both builds (each build has its own instance) so you could get that error message.

@mjackson I think that I have this scenario, do you have a tip on how to solve this?

Another option is unpublish 4.4.0 and re-release it as 5.0.0. I’d vote for that. A version is just a number; it doesn’t have to mean anything.

Just want to point this out in case it’s related to this. I think it’s an undocumented change. After updating react-router and react-router-dom to 4.4.0 I’m getting a new error:

TypeError: Cannot read property ‘history’ of undefined this.sendPageView(this.context.router.history.location)

Has something changed in regards to this? I tried to find a changelog and found changes.md but it doesn’t address 4.4.0. I do understand that context.router is “experimental”. I can see that you referenced this above:

“though one could possibly make the argument that using the new context API is a breaking change”

For context this is part of a Google Analytics automation I made:

class GAListener extends React.Component {
  static contextTypes = {
    router: PropTypes.object
  }

  sendPageView = (location) => {
    ReactGA.set({ page: location.pathname })
    ReactGA.pageview(location.pathname)
  }

  componentDidMount() {
    this.sendPageView(this.context.router.history.location)
    this.context.router.history.listen(this.sendPageView)
  }

  render() {
    return this.props.children
  }
}

Used like this:

<BrowserRouter>
  <GAListener>
    <App/>
  </GAListener>
</BrowserRouter>

thanks for the info @mjackson!! I was wondering if I should kill you in a snap or torture you some months… ❤️

Just want to add this here for others that may be googling the error as I did. The specific error I got was:

Invariant Violation: You should not use <Link> outside a <Router>

And I managed to fix it using the resolutions method mentioned above (thanks @StringEpsilon!)

So 4.4.0 is unpublished, however I initialed my project on Monday, and a child dependence installed the latest react-router at 4.4.0. Then when I deployed my project, npm says npm ERR! 404 Not Found: react-router-dom@4.4.0, then I found this issue. So is there a way to downgrade my child dependence react-router and react-router-dom to 4.3.1, or will it be a new 4.x to override the affected projects’ dependency?

Temporarily fixed by running:

npm i react-router-dom@4.3.1 react-router@4.3.1
npm un --save react-router-dom react-router

This updates the dependencies in package-lock.json without changing package.json.

@sPaCeMoNk3yIam You’ll probably want to blow away your node_modules and reinstall. Things get weird when a package is unpublished.

@timdorr Sadly, it didn’t do the trick.

@mjackson Re-releasing 4.3.1 as 4.5 would just re-introduce this bug for people who already migrated to 4.4, as 4.4 also doesn’t have a properly pinned react-router version as a dependency. And while 4.4 is backwards compatible, 4.4 has new features that 4.3.1 didn’t have. Those would break (such as route path arrays).

I suggest pinning this issue and maybe adding something to the readme and clarifying the changelog and documentation and adding the resolutions workaround to it.

It doesn’t solve the issue, but it’s better than creating a new round of breakage.