Can't use a npm library, which depends on react-redux, on different library versions among repositories

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

The versions

• "react": "17.0.2"
• "react-dom": "17.0.2"
• "redux": "4.2.0"
• "react-redux": "8.0.2"

What is the current behavior?

Context

I’m working on a multi-frontend environment with Webpack module federation + react + redux + a NPM library for shared components, which uses react-redux to compose the shared store.

The issue

All repositories (aka micro-frontends - MFE), must use the SAME SDK library version. When we don’t, react-redux breaks weirdly. Even when publishing two versions with the same code, it doesn’t run.

What is the expected behavior?

It should work properly since there wasn’t code changes, only the package version is different.

Which browser and OS are affected by this issue?

Chrome 104

Did this work in previous versions of React Redux?

• Yes

[phryneas]

Yes, because if you have two different versions of the library bundled up in your code (and that’s what is probably happening), they won’t be able to see each other. You might be using the Provider from one version with the useContext call from the other.

[markerikson]

Yeah, what’s probably happening is that each distinct build of your own app’s base package is bundling in a copy of React-Redux. Thus, when the app loads, there are multiple copies of React-Redux, each with its own entirely separate const ReactReduxContext = React.createContext() call inside. Thus, there are totally separate ReactReduxContext instances, React sees them as being !==, and they are treated as being different and things don’t line up right.