React-redux: "Invalid hook call" when embedding React/Redux app in another React app

[KristianLonergan]

The following error occurs when I am trying to embed a simple React/Redux app within another React application

_Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:_
_1. You might have mismatching versions of React and the renderer (such as React DOM)_
_2. You might be breaking the Rules of Hooks_
_3. You might have more than one copy of React in the same app_
_See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem._

The versions of react are the same in both applications and there is only one copy of react in the same app.

I have created the following very basic example of what I am trying to do:

TestAppA is a simple react/redux application that shows/hides text on the click of a button. This app is bundled using rollup js

TestAppB - created with create-react-app, TestAppB is a dependency

What is the expected behavior?
The expected behaviour would be for TestAppA to be rendered within TestAppB however the error above occurs.

*Note: if the version of react-redux is downgraded from 7.1.0 to 6.0.1 (in TestAppA) no errors occur and the component is rendered correctly

Versions :

TestAppA versions:
_React: ^16.8.6
React-dom: ^16.8.6
React-redux: ^7.1.0
Redux: ^4.0.1_

TestAppB versions:
_React: ^16.8.6
React-dom: ^16.8.6_

[timdorr]

I don't believe this is a React Redux bug. You're marking any imported modules starting with react as external in the Rollup bundle, which would include react-redux. Since you're not providing it to the module when importing it into the parent app, it is likely coming back as undefined or something like that. I'm not sure exactly what happens there, but regardless, I don't believe it's a bug on our end.

[KristianLonergan]

If that was the case I would get an error saying: "Module not found: Can't resolve 'react-redux' in ..." ?
As I said above if I simply change the version of react-redux from 7.1.0 to 6.0.1 there is no issue and the application renders and works fine.

[markerikson]

Yes, because v7 uses hooks and v6 doesn't.

[LetItRock]

@markerikson, @timdorr

I'm also getting this error with exact same dependencies like in TestAppA example above...
Maybe the stack trace will help you somehow, it's pointing to useMemo called from connectAdvanced:

I've checked those sources and the React version is 16.8.6 ...

[KristianLonergan]

In the end, my issue wasn't actually a redux issue it was actually a dependency issue.
In my TestAppA I had react-dom as a dependency when it should have been a peer dependency. I had two versions of react running therefore I was getting the invalid hook call error.
See link

[markerikson]

Yeah - we _know_ the code works correctly, and every example of this has been a build configuration issue of some kind.

[LetItRock]

@markerikson Yes you was right, it was a problem with Webpack configuration... thanks for pointing on that!

[ashokkumarsand]

@KristianLonergan cloud you please share your working code skeleton

[ashokkumarsand]

Also if I downgrade the versions then I am getting an error of sharing store.
Could not find "store" in the context of "ConnectAdvanced(WithStyles(Loader))". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to ConnectAdvanced(WithStyles(Loader)) in connect options.