using Provider from "react-redux" is not working, I am getting blank screen. One of the errors shows Invalid hook call

Question

This is the 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 and fix this problem. React 2 Provider Redux React 17 js index.js:16 factory react refresh:6 Webpack 3 react.development.js:1476 React 2 Provider Redux React 17 js index.js:16 factory react refresh:6 Webpack 3 webpack_require The above error occurred in the component:

Provider@http://localhost:3000/static/js/bundle.js:69100:15

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

React 10
unstable_runWithPriority scheduler.development.js:468
React 9
js index.js:16
factory react refresh:6
Webpack 3

This is from App.js

function App() {
    return (
        <div className="App">
            <h1>Hello Ignite</h1>
        </div>
  );
}

export default App;

This is from index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
//REDUX SETUP
import { createStore } from "redux";
import rootReducer from "./reducers/index";
import { Provider } from "react-redux";


const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
        <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.

This is from ./reducers/index

import { combineReducers } from "redux";
import gamesReducer from "./gamesReducer";

const rootReducer = combineReducers({
  games: gamesReducer,
});

export default rootReducer;

This is from ./reducers/gamesReducer

const initState = {
    popular: [],
    newGames: [],
    upcoming: [],
    searched: [],
  };
  
  const gamesReducer = (state = initState, action) => {
    switch (action.type) {
      case "FETCH_GAMES":
        return { ...state};
      default:
        return { ...state };
    }
  };
  
  export default gamesReducer;

This is from package json

{
  "name": "ignite",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

This is from node modules package json

{
  "dependencies": {
    "framer-motion": "^6.2.3",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "styled-components": "^5.3.3"
  }
}

I'm stuck in the beginning of project the moment App wrapped into Provider it is not rendering "Hello Ignite" Your help would be highly appreciated.

Answer 1

I encountered the same challenge too recently. I installed the react-redux version 5 instead of the version 7 by running this command:

npm install react-redux@5

I hope this works for you too.