I am new to react and I am working on developing a web application with video recording functionality. I am getting the following error logged in the browser console when I use MaterialUI:
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
I have not used hooks in my application. I tried to reproduce the error with a new react component created with a single button component. I am getting the same error with the below code:
App.js
import Button from "@mui/material/Button";
function App() {
return (<>
<div className="App">
<header className="App-header">
<Button>Hi</Button>
</header>
</div>
</>);
}
export default App;
Package.json
{
"name": "mui_test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@testing-library/jest-dom": "^5.16.1",
"@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.2"
},
"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"
]
}
}
When I do npm ls react, I get the following output:
├─┬ @emotion/[email protected]
│ └── [email protected] deduped
├─┬ @emotion/[email protected]
│ └── [email protected] deduped
├─┬ @testing-library/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]
The error occurred after I installed the react-file-reader module. I have uninstalled this module now. But I still get this error. Can someone please guide me on fixing this error.
