Upgrading to react 17.0.0 breaks connected-react-router which breaks react-admin

[otaviobonder-deel]

Everything was running fine, but after I upgraded React to 17.0.0, react-admin stopped working, because of an incompatibility between connected-react-router and react 17.0.0:

Error: Could not find "store" in the context of "Connect(withRouter(WithStyles(Layout)))". Either wrap the root component in a <Provider>, or pass a custom React context provider to and the corresponding React context consumer to Connect(withRouter(WithStyles(Layout))) in connect options.

I really like react-admin, but it could move away from connected-react-router. This lib is not updated regularly and I've had so many trouble with it before.

Here are my lib versions:

"connected-react-router": "^6.8.0",
"history": "4.10.1",
"react": "^17.0.1",
"react-admin": "^3.9.6",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",

I think there is a workaround passing a context do <ConnectedRouter>, but then I would need to stop using the <Admin> and implement it by myself, which would be a big pain to refactor all my resources

[djhi]

It may be fixed when #5453 is merged and 3.10 released. I haven't got this error when upgrading the examples.

[jkolyer]

When is 3.10 scheduled for release? I'm blocked on this at the moment.. Spoke too soon, but still eager to get latest release.

[jkolyer]

I built the tutorial using both yarn and yarn2 with the latest react versions (on a fresh CRA app, v17). Yarn1 works as expected, but lots of unmet peer dependency warnings. Yarn2 builds eventually, but the link routes don't work due to exception.

It works on yarn2 when I downgrade history package from 5.0.0 to 4.10.1, as suggested here.

If you checkout redux toolkit, it may allow you to remove connected-react-router altogether from react-admin.

Note I had to use this command to install Yarn2 due to pending fix: yarn set version from sources --branch 2078 (first run yarn set version berry from classic). CRA didn't work out of the box with TS until I added this .eslintrc.js file.

[otaviobonder-deel]

The problem I had was because I was using react-admin in an application which was already using redux, so I implemented the store by my self. It was working until the v17 release, then it stopped working.

I decided to split my application, removing the admin from the core and making another front-end just for the admin. I'm not having any trouble using v17 with just react-admin.

I guess the problem comes when you update to v17 with a custom redux store

[EmrysMyrddin]

I have the same problem without a custom redux store.
I juste use Admin as in examples and I have the same error.

Did you found a workaround ?

[pakdev]

I'm hitting this issue without a custom redux store; I'm just trying to implement a custom menu. I'm also still on React v16.

[EmrysMyrddin]

The issue is caused by having multiple versions of react-redux in your app. Each versions can't see the context of the other ones.

You can check if it's your case with yarn yarn why react-redux. It should show you the versions installed and why (which of your dependencies caused this installation)

Check the ranges of the packages depending of react-redux. If the ranges are compatible, then it's because of yarn's algorithm... It can install the same dependency with multiple versions even if all ranges are compatible.

If this is your case (which it probably is) you can use yarn-deduplicate to merge multiple versions of the same package which are range compatible.

In your case, you can run yarn-deduplicate yarn.lock --packages react-redux.
You can also use yarn-deduplicate yarn.lock --list --packages react-redux to see if their is duplicated versions and which version will be used after your run the previous command.

[EmrysMyrddin]

By the way, this issue can probably be closed, since it's not a problem with react 17.0.0