CODEWITHSUNDEEP
reactjsreduxreact-redux
suryaa1996
suryaa1996

Reputation: 135

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

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.

Upvotes: 9

Views: 8699

Answers (6)

Jvil
Jvil

Reputation: 22

I solved this same issue by checking on the version compatibility for my stack, this is how I fixed that error message. This is what I have in my package.json file:

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.0",
"redux": "^4.0.5",

Upvotes: 0

David
David

Reputation: 816

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

Upvotes: 10

TR3
TR3

Reputation: 387

This is a really confusing pattern, and may be causing other issues down the line

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

Refactored

const initialState = {
team_id: null,
is_valid_signup: false
}

Then your reducer as follows:

 function reducer (state = initialState, action) {

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

This may not be related, but it could be throwing something off in your Redux up the chain.

Upvotes: 0

Carlotta
Carlotta

Reputation: 334

Mismatching Versions of React and React DOM

First, you should check your react-com version, it could be that the version doesn't support hooks yet. (Maybe add those to your Questions, so we know that they don't cause the error)

Breaking the Rules of Hooks

If that didn't help, maybe add eslint-plugin-react-hooks plugin to your packages, this will help you to catch a lot of errors.

Duplicate React

In order for hooks to work, the React import from your application code needs to resolve to the same module as the React import from inside the react-dom package.

If you use Node for package management, you can run this check in your project folder:

npm ls react

For more information about this error, look at their Docs.

Upvotes: 0

user16779406
user16779406

Reputation:

If you're just after accessing params then I'd recommend to make a custom hook for accessing params, instead of using redux to do that. This is how I do it.

//make a separate file eg:useGetParameter.js
//By add use in front of functions name it becomes a custom hook

import { useLocation } from "react-router-dom";

export default function useGetParameter(name: string) {
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  return query.get(name);
}

Then in your main file where you want to access that parameter use it like this. Eg: if you want to access id from http://example.com?id=2

//...
import useGetParameter from './path';

export default function App(){
   const id = useGetParameter('id');

  //...
}

Upvotes: 0

realAlexBarge
realAlexBarge

Reputation: 1898

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

Upvotes: 3

Related Questions