Connected-react-router: Problems upgrading to 6.4.0 with React Router 5.0.0

[bmueller-sykes]

Hi,

I'm getting an issue when I upgrade connected-react-router to 6.4.0 and react-router to 5.0.0. The error is below. I downgraded react-router to 4.3.1, and the error went away. (FWIW, I got the identical error with react-router 5 and connected-react-router 6.3.2)

I've spent some time stripping away elements of my app to see if this problem could be coming from somewhere else, and I feel reasonably confident that this issue is due to connected-react-router (but am perfectly willing to admit that this is due to some other library incompatibility).

Anybody else experiencing this issue? Any advice for how I might be able to truly nail down where this is coming from?

Error: You are loading the CommonJS build of React Router on a page that is already running the ES modules build, so things won't work right.

./node_modules/react-router/cjs/react-router.js
node_modules/react-router/cjs/react-router.js:757
__webpack_require__
/Users/bmueller/Sites/learn-frontend/webpack/bootstrap:786
  783 | };
  784 | 
  785 | // Execute the module function
> 786 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  787 | 
  788 | // Flag the module as loaded
  789 | module.l = true;
View compiled
fn
/Users/bmueller/Sites/learn-frontend/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {

[jkarttunen]

I was seeing a lot of unnecessary re-renders again.

[bmueller-sykes]

@jkarttunen Is that related to the issue I'm seeing? Did you see the issue I ran into? If so, were you able to resolve it somehow?

[kyle-mccarthy]

@bmueller-sykes are you also using react-router-dom? If so uninstall react-router and just use react-router-dom. I was having the same error because in some places I would use one lib and other places the other lib.

[bmueller-sykes]

@kyle-mccarthy wait...you don't need both react-router and react-router-dom? huh. I'll give it a try!

[kyle-mccarthy]

react-router is a dependency of react-router-dom so it will get pulled in already!

[bmueller-sykes]

huh. well, as soon as I dig out of the error I'm under, I'll give it a whirl. Thanks!

[bmueller-sykes]

@kyle-mccarthy Okay, I pulled out react-router, and upgraded to react-router-dom 5.0.0, and I get the same error. So unfortunately that's not the problem. Nuts.

[bmueller-sykes]

Is anybody else having issues with react router 5 and connected-react-router 6.4? I'd be a little surprised if this were a problem unique to my install, though I guess anything is possible.

[binchik]

@bmueller-sykes I have the exact same problem.

[binchik]

@bmueller-sykes And I just got it working. I was using "babel-plugin-transform-imports" with the following options:

[
      "transform-imports",
      {
        "react-router": {
          "transform": "react-router/${member}",
          "preventFullImport": true
        }
      }
]

I removed it and now react-router 5 works for me.

[bmueller-sykes]

@binchik Glad you were able to get your environment working! Is library in your package.json file? I don't have that package anywhere in my code. The only babel things I have in my package.json are:

    "babel-cli": "6.26.0",
    "babel-plugin-react-intl": "3.0.1",
    "babel-preset-react-app": "8.0.0",

...so I don't think this is what's going on in my environment. Ugh. So frustrating.

[lostPixels]

I'm currently experiencing similar issues with my application. It appears to be some sort of issue with peer dependancies and the numerous interconnected libraries that you need to use a react router with redux.

[bmueller-sykes]

I spent some time when this issue first surfaced trying to narrow down the issue, but after a few hours of tinkering, I couldn't produce an isolated test case. At some point I may have to take another swing at it. There are some other open issues here relating to 6.4 and RR 5, so maybe they're all related.

[lostPixels]

I ended up starting "fresh" by removing package-lock.json and node_modules and reinstalling everything. Once you accidentally introduce react-router to your package.json it kind of poisons your lock file and you can't easily fix it. And worse, some times the only error is routes working differently or being out of sync in the browser.

[bmueller-sykes]

I've only got react-router-dom in my package.json, and I managed to disable package-lock.json entirely by adding an .npmrc file with package-lock=false as the only content of that file. I've also blown away my node_modules folder and rebuilt on more than one occasion. But despite all that, I'm still getting the error. @lostPixels were you able to get your environment working once you did all the steps you outline above?

[binchik]

@binchik Glad you were able to get your environment working! Is library in your package.json file? I don't have that package anywhere in my code. The only babel things I have in my package.json are:

    "babel-cli": "6.26.0",
    "babel-plugin-react-intl": "3.0.1",
    "babel-preset-react-app": "8.0.0",

...so I don't think this is what's going on in my environment. Ugh. So frustrating.

Yeah, that's not what's happening with your setup unfortunately. Hope you'll resolve your issue.

The "babel-plugin-transform-imports" was transforming

import {Link, Router} from 'react-router';

to the following:

import Link from 'react-router/Link';
import Router from 'react-router/Router';

In case you are using the latter method for react-router imports, try to change it to the first method.

[bmueller-sykes]

I'm doing this:

import {Link, Router, withRouter, etc} from 'react-router-dom';

...where everything is imported via react-router-dom per @kyle-mccarthy suggestion.

I did just find a few places where I was importing via react-router, even though that wasn't explicitly declared in my package.json. I thought that might be the culprit (falling into the "how did that ever work" category), but I upgraded all the imports to react-router-dom, and I'm still getting the issue.

[bmueller-sykes]

OMG!

I just did a search of my code, and it turns out I had two places that used the import Redirect from 'react-router/Redirect' format. And that's what was breaking my code. As soon as I switched those few places to import { Redirect } from 'react-router-dom' everything worked. What made this hard (obviously) is that the error itself gave no indication of what the source of the problem was. Sigh.

Thanks for everybody's help! I give this ticket eight facepalms.

🤦‍♂ 🤦‍♂ 🤦‍♂ 🤦‍♂ 🤦‍♂ 🤦‍♂ 🤦‍♂ 🤦‍♂

[AlexVestin]

@bmueller-sykes Thanks updating, would have gone crazy with that otherwise. Autocompleting/importing has its drawbacks lol

[SamMorrowDrums]

I'm having issues when using with https://github.com/mastilver/dynamic-cdn-webpack-plugin. For some reason it seems to be loading the CDN version, but it must be loading it locally too.