supasate / connected-react-router

A Redux binding for React Router v4
MIT License
4.73k stars 592 forks source link

"Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component" error when using Connected Router with Electron #521

Open haveamission opened 3 years ago

haveamission commented 3 years ago

I have been working on this for the past day as I cannot seem to find the cause.

I have a fairly simple toy model:

      <Provider store={store} context={ReactReduxContext}>
        <PersistGate persistor={persistor}>
          <ConnectedRouter history={history} context={ReactReduxContext}>
            <View style={{ backgroundColor: "red" }}>
              <Text>Test!</Text>
            </View>
          </ConnectedRouter>
        </PersistGate>
      </Provider>

And I get this error:

Uncaught Error: 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.
    at resolveDispatcher (/Users/andy/Desktop/Projects/AppDir/Frontend/SpecificApp/node_modules/react/cjs/react.development.js:1465)
    at useMemo (/Users/andy/Desktop/Projects/PandaistOfficial/Frontend/PandaistDict/node_modules/react/cjs/react.development.js:1520)
    at Provider (/Users/andy/Desktop/Projects/AppDir/Frontend/SpecificApp/node_modules/react-redux/lib/components/Provider.js:24)
    at renderWithHooks (react-dom.development.js?61bb:14803)
    at mountIndeterminateComponent (react-dom.development.js?61bb:17482)
    at beginWork (react-dom.development.js?61bb:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
    at invokeGuardedCallback (react-dom.development.js?61bb:292)
    at beginWork$1 (react-dom.development.js?61bb:23203)
react-native-logs.fx.ts?51a9:34 The above error occurred in the <Provider> component:
    in Provider (created by startApp)
    in startApp (created by ExpoRootComponent)
    in ExpoRootComponent
    in div (created by View)
    in View (created by AppContainer)
    in ChildrenWrapper (created by Root)
    in _default (created by Root)
    in Root (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer

I am still using a class component for my top component, as I haven't migrated yet, but I don't think that would be the issue here (and I have tested switching to functional component temporarily, and saw no change).

If I do an even simpler toy example:

            <View style={{ backgroundColor: "red" }}>
              <Text>Test!</Text>
            </View>

No error is thrown.

Web version works absolutely fine.

What could be causing this issue?

haveamission commented 3 years ago
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-unimodules": "~0.11.0",
    "react-native-web": "~0.13.12",
    "react-redux": "^7.2.0",
    "react-responsive": "^8.2.0",
    "react-router-dom": "^5.2.0",
    "redux": "^4.1.0",
    "redux-api-middleware": "^3.2.0",
    "redux-persist": "^6.0.0",
    "redux-persist-transform-immutable": "^5.0.0",

Relevant versions of packages