React is returning Invalid hook call error when using Material UI

January 7, 2022

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/react@11.7.1
│ └── react@17.0.2 deduped
├─┬ @emotion/styled@11.6.0
│ └── react@17.0.2 deduped
├─┬ @testing-library/react@12.1.2
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-scripts@5.0.0
│ └── react@17.0.2 deduped
└── react@17.0.2

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.