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

[abanik0831]

I'm seeing the following error:

``console.error node_modules/react-router-dom/node_modules/react-router/warnAboutDeprecatedCJSRequire.js:17 Warning: Please userequire("react-router").Routerinstead ofrequire("react-router/Router")`. Support for the latter will be removed in the next major release.

console.error node_modules/react-router-dom/node_modules/react-router/warnAboutDeprecatedCJSRequire.js:17
Warning: Please use require("react-router").MemoryRouter instead of require("react-router/MemoryRouter"). Support for the latter will be removed in the next major release.

console.error node_modules/react-router-dom/node_modules/react-router/warnAboutDeprecatedCJSRequire.js:17
Warning: Please use require("react-router").Route instead of require("react-router/Route"). Support for the latter will be removed in the next major release.

console.error node_modules/react-router-dom/node_modules/react-router/warnAboutDeprecatedCJSRequire.js:17
Warning: Please use require("react-router").Prompt instead of require("react-router/Prompt"). Support for the latter will be removed in the next major release.

console.error node_modules/react-router-dom/node_modules/react-router/warnAboutDeprecatedCJSRequire.js:17
Warning: Please use require("react-router").Redirect instead of require("react-router/Redirect"). Support for the latter will be removed in the next major release.

console.error node_modules/react-router-dom/node_modules/react-router/warnAboutDeprecatedCJSRequire.js:17
Warning: Please use require("react-router").StaticRouter instead of require("react-router/StaticRouter"). Support for the latter will be removed in the next major release.

console.error node_modules/react-router-dom/node_modules/react-router/warnAboutDeprecatedCJSRequire.js:17
Warning: Please use require("react-router").Switch instead of require("react-router/Switch"). Support for the latter will be removed in the next major release.```

Inside the package.json file of react-router dom:

"dependencies": { "history": "^4.7.2", "invariant": "^2.2.2", "loose-envify": "^1.3.1", "prop-types": "^15.5.4", "react-router": "^4.3.1", "warning": "^3.0.0" },

It's downloading 4.4.0 due to this.

[StringEpsilon]

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.

[pshrmn]

The caret specifier (^), which is what RR uses, grabs the latest version in the same major. Perhaps future releases should pin their RR dependencies exactly or use a tilde specifier, but for now the best solution would be to add the react-router dependency, as @StringEpsilon suggested.

[sampsakuronen]

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 outside a

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

[mjackson]

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 [email protected]) 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?

[sampsakuronen]

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>

[StringEpsilon]

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

[Victor-Varghese]

using

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

and

                "react-router": "4.3.1",
        "react-router-dom": "^4.3.1",
        "react-router-native": "^4.3.0",
        "react-router-native-stack": "^0.0.15",

Fixed issues. got the build working

But hw i can used the latest versions without any issues?? I tried using everything latest, got undefined error.

[umakantp]

I'm facing a similar issue even after installing the latest versions of react-router-dom 4.4.0 and react-router 4.4.0

[mohsinulhaq]

I have tried everything to get the latest version working, nothing worked. Going ahead with pinning react-router-dom to 4.3.1.
My library used to depend on react-router-dom as its peer dependency. But now since [email protected] depends upon react-router@^4.3.1, I am getting [email protected] in my node_modules which is incompatible. As such I would need to add a new peer dependency to my library as react-router pinned to 4.3.1, and this becomes a breaking change for my library. 😕

[timdorr]

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.

[zaklampert]

I think 4.4.0 might be a breaking change, at least it was for my app (and my weekend!)

I have a component library in it's own npm package that uses <Link />'s (requires being used in an app that has a <Router>)

Both my component package and my app package had versions 4.4.0

yarn list react-router react-router-dom
yarn list v1.12.3
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ [email protected]
└─ [email protected]

and with a setup like

```packages/custom-components/componentWithLink.js
import { Link } from 'react-router-dom'
export const ComponentWithLink = () => (
Click me
)

```app.js
import { BrowserRouter } from 'react-router'
import { ComponentWithLink } 'custom-components'

const App = () => (
  <BrowserRouter>
    <ComponentWithLink />
  </BrowserRouter>
)

export default App

I was getting the invariant violation described at my comment

Ultimately, forcing things to 4.3.1 with

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

was the only way I could get things working. Thanks, @StringEpsilon

[timdorr]

It's not a breaking change, as the context change is internal and was never a public API to use. Unfortunately, we have to break semver semantics because of the previous version's open selector for react-router.

@mjackson What about putting an npm deprecate message on the release to let folks know to upgrade react-router as well?

[mjackson]

Another option is unpublish 4.4.0 and re-release it as 5.0.0.

That's a great idea, actually. I think that's probably the cleanest solution, and the least work for everyone. Thanks, @timdorr.

@sampsakuronen We have never documented or supported using this.context.router directly. That's our private API. I discussed this in the release notes to 4.4.0-beta.0.

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

[radicalviva]

Another option is unpublish 4.4.0 and re-release it as 5.0.0.

That's a great idea, actually. I think that's probably the cleanest solution, and the least work for everyone. Thanks, @timdorr.

@sampsakuronen We have never documented or supported using this.context.router directly. That's our private API. I discussed this in the release notes to 4.4.0-beta.0.

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

According to new policy of npm unpublish, we can't unpublish 4.4.0.
policy
If the version is older than 24 hours, then the unpublish will fail, with a message to contact [email protected].
In my option, may be we can remind other by npm deprecate

[mjackson]

I just unpublished 4.4.0. I'm going to republish 4.4.0 as 5.0.0 with pinned version numbers.

[mjackson]

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.

[evedes]

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

[sPaCeMoNk3yIam]

I still got this problem now:

WARNING in ./node_modules/react-router/esm/react-router.js 324:15-27
"export 'default' (imported as 'pathToRegexp') was not found in 'path-to-regexp'
 @ ./node_modules/react-router-dom/esm/react-router-dom.js
 @ ./src/index.jsx

[timdorr]

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

[sPaCeMoNk3yIam]

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

[brandonburkett]

Hit this one today doing npm outdated within electrode-redux-router-engine (and updating to 4.4.0). Rolled back to 4.3.1 and things are working again. I'll let Electrode folks know that electrode-redux-router-engine may have an issue with 5.0.

[timdorr]

@sPaCeMoNk3yIam That might have to do with your bundler. It's not a problem with this library AFAICT.

[timdorr]

@brandonburkett There won't be a problem with 5.0. This was a breakage for <=4.3.1, not 4.4.0/5.0.0 users.

[brandonburkett]

The error I was getting with 4.4.0/5.0.0 was Invariant Violation: You should not use <Switch> outside a <Router> but did not get that with 4.3.1. Again, this is most likely a electrode-redux-router-engine issue and how they are doing SSR.

EDIT: They are still using react-router-config 1.0.0-beta.4 which could play a part in it.

[sPaCeMoNk3yIam]

@timdorr seems like for babel to operate with react-router you have to add

sourceType: "unambiguous"

to your Babel config 😕

This might also be worth noting:

yarn list --pattern path-to-regexp
yarn list v1.15.2
├─ [email protected]
└─ [email protected]
   └─ [email protected]

Where path-to-regexp already is on v3.0.0.

[mihirgokani007]

Upgrading to react-router-dom to v5.0.0 solved this issue. It's funny that the release note says "Sorry for the convenience. :grimacing:"

[timdorr]

@brandonburkett Yes, you'll need to keep RRC in sync with RR/RRD. They are all at the same version now to make that more clear.

[timdorr]

@mihirgokani007 Yep, that's an intentional Mitch Hedberg reference 😄

@sPaCeMoNk3yIam Sounds like you're running Babel on your dependencies, which is an anti-pattern. The code we ship is already transpiled, so you're doing extra work for no benefit.

[mjackson]

I think we can close this now. 4.3.1 shouldn't pull in 4.4.0 any longer.

Sorry for the trouble! Have fun with v5 :)

[antonybudianto]

Hi, 4.4.0 is still on yarn registry?
https://yarnpkg.com/en/package/react-router

[hengkx]

npm don't 4.4.0.

[ccloli]

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: [email protected], 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?

[ccloli]

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: [email protected], 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 [email protected] [email protected]
npm un --save react-router-dom react-router

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

[elmeerr]

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

[chacestew]

To add to @elmeerr's question, how should library developers creating utilities over react-router for react-router based apps proceed? In this case, there are two builds with distinct Contexts, one in the parent project and one in the utility.

[elmeerr]

@chacestew I think it worth for you (and anyone that has interesting on this) to follow this issue #https://github.com/reduxjs/react-redux/issues/1202 the outcome might be helpful

[chacestew]

@elmeerr for you or anyone else who arrives here, I resolved the _"2 different builds of the router issue"_ issue by marking react-router-dom as external in the Rollup config and as a peerDependency in package.json.

To also make it work locally when installed via npm link, I needed to alias react-router-dom in the webpack config of the parent app, like this comment: https://github.com/facebook/react/issues/13991#issuecomment-435587809)

Hope it helps your case.

[miteshnath]

hi!
my machine: ubuntu disco
node: v10.15.3
npm: 6.4.1

"react-router": "4.3.1",
"react-router-dom": "^4.3.1",

I am getting Invariant Violation, on running dev-server

error:
A <Router> may have only one child element

The same code worked like a charm few days back. I noticed [email protected] in my old package-lock.json. The registry for [email protected] throws error now. I tried updating to 5.0.0 but still no use. Any help would be appreciated. Thanks!

[rkbansal]

This is just because of caret(^) in the package.json, because it will update it to the latest minor version that is in your case from 4.3.1 to 4.4.0,

Remove the caret(^) from "react-router-dom": "^4.3.1" in package.json. ie.

change it from
dependencies: {
"react-router-dom": "^4.3.1"
}

to
dependencies: {
"react-router-dom": "4.3.1"
}

then do,
rm -rf node_modules

then,
delete package-lock.json

then do,
npm install

Then,
Cheers!! Now it should work!!