Error: Invalid hook call at Provider,while using react-redux

Question

I am making an app to get params from a url and work based on the values of url, in order to do that I tried implementing redux,I think I wrote most of the code and I am beginner in react and redux. While I am Inserting Provider in my index.js file it gives me invalid hookCall error.I have come across some posts but none could solve the issue. like :Attaching Provider of react-redux gives me an invalid hook error, https://github.com/reduxjs/react-redux/issues/1331

    index.js

    import React from 'react';
    import ReactDOM, {render} from 'react-dom';
    import { Provider } from 'react-redux';
    import App from "../src/App";
    import { createStore } from 'redux';
    import reducer from "../src/reducers/team_reducer";

    const store = createStore(reducer);
    render(<Provider store={store}> <App/> </Provider>, document.getElementById("root") )

console output:

   react.development.js:1590 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

  at resolveDispatcher (react.development.js:1590)
  at useMemo (react.development.js:1642)
  at Provider (Provider.js:10)
  at renderWithHooks (react-dom.development.js:16260)
  at mountIndeterminateComponent (react-dom.development.js:18794)
  at beginWork$1 (react-dom.development.js:20162)
  at HTMLUnknownElement.callCallback (react-dom.development.js:336)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
  at invokeGuardedCallback (react-dom.development.js:440)
  at beginWork$$1 (react-dom.development.js:25780)
  at performUnitOfWork (react-dom.development.js:24695)
  at workLoopSync (react-dom.development.js:24671)
  at performSyncWorkOnRoot (react-dom.development.js:24270)
  at scheduleUpdateOnFiber (react-dom.development.js:23698)
  at updateContainer (react-dom.development.js:27103)
  at react-dom.development.js:27528
  at unbatchedUpdates (react-dom.development.js:24433)
  at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527)
  at render (react-dom.development.js:27608)
  at Module../src/index.js (index.js:11)
  at __webpack_require__ (bootstrap:785)
  at fn (bootstrap:150)
  at Object.1 (snackBar.js:37)
  at __webpack_require__ (bootstrap:785)
  at checkDeferredModules (bootstrap:45)
  at Array.webpackJsonpCallback [as push] (bootstrap:32)
  at main.chunk.js:1
  resolveDispatcher @ react.development.js:1590
  useMemo @ react.development.js:1642
  Provider @ Provider.js:10
  renderWithHooks @ react-dom.development.js:16260
  mountIndeterminateComponent @ react-dom.development.js:18794
  beginWork$1 @ react-dom.development.js:20162
  callCallback @ react-dom.development.js:336
  invokeGuardedCallbackDev @ react-dom.development.js:385
  invokeGuardedCallback @ react-dom.development.js:440
  beginWork$$1 @ react-dom.development.js:25780
  performUnitOfWork @ react-dom.development.js:24695
  workLoopSync @ react-dom.development.js:24671
  performSyncWorkOnRoot @ react-dom.development.js:24270
  scheduleUpdateOnFiber @ react-dom.development.js:23698
  updateContainer @ react-dom.development.js:27103
  (anonymous) @ react-dom.development.js:27528
  unbatchedUpdates @ react-dom.development.js:24433
  legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
  render @ react-dom.development.js:27608
  ./src/index.js @ index.js:11
  __webpack_require__ @ bootstrap:785
  fn @ bootstrap:150
  1 @ snackBar.js:37
  __webpack_require__ @ bootstrap:785
 checkDeferredModules @ bootstrap:45
 webpackJsonpCallback @ bootstrap:32
 (anonymous) @ main.chunk.js:1
 index.js:1 The above error occurred in the <Provider> component:
 in Provider (at src/index.js:11)

 Consider adding an error boundary to your tree to customize error handling 
 behavior.

reducer . js

 import React from "react";

 const in i State = {
 team_id : null,
 is Valid Signup : false
 }

 function reducer (state = in i State, action) {
 console.log("check ",state,action);

 switch(action.type) {
    case "ADD_TEAM" : return { team_id : action.team_id, is Valid Signup : 
 true };
    case 'NEW_TEAM' : return { team_id : null, is Valid Signup : true };
    default : return state;
  }
 }

 export default reducer;

ask me for any code, cause I really need to figure this out.

Answer 1

I had a similar issue; I fixed this by running npm install react-redux redux . Try it.

Answer 2

As the log suggests you are probably breaking the Rules of Hooks. Please try to wrap the redux provider, store setup and reducer in a functional react component.

E.g.:

    import React from 'react';
    import ReactDOM, {render} from 'react-dom';
    import { Provider } from 'react-redux';
    import App from "../src/App";
    import { createStore } from 'redux';
    import reducer from "../src/reducers/team_reducer";

    const AppWrapper = ({ children }) => {
        const store = createStore(reducer);

        return (<Provider store={store}>{children}</Provider>);
    }

    render(<AppWrapper> <App /> </AppWrapper>, document.getElementById("root") )

Please also check out https://reactjs.org/docs/hooks-rules.html