Reputation: 11
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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- 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.
Upvotes: 1
Views: 1147
Reputation: 21
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.
Upvotes: 2