Material UI V5, inalid hook and ForwardRef(Button) Problem in ReactJS

I am trying to use Material UI in my project and getting an invalid hook, The above error occurred in the <ForwardRef(Button)> component, and some other problems. I created a simple test file to isolate and make sure that material UI is the issue. Any idea on how I can fix this issue, thank you.

Node version: v16.13.1

Installed packages (C:Usersani):

@emotion/react@11.9.3
@emotion/styled@11.9.3
@mui/material@5.8.5

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

import React from 'react'
import {Button} from '@mui/material';

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

export default App;

Package.JSON

{
  "name": "material_test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.9.3",
        "@emotion/styled": "^11.9.3",
        "@mui/material": "^5.8.5",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "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"
    ]
  }
}

Error

react.development.js:209 Warning: 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
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    printWarning @ react.development.js:209
    error @ react.development.js:183
    resolveDispatcher @ react.development.js:1592
    useContext @ react.development.js:1602
    Button @ Button.js:224
    renderWithHooks @ react-dom.development.js:16305
    updateForwardRef @ react-dom.development.js:19226
    beginWork @ react-dom.development.js:21636
    beginWork$1 @ react-dom.development.js:27426
    performUnitOfWork @ react-dom.development.js:26557
    workLoopSync @ react-dom.development.js:26466
    renderRootSync @ react-dom.development.js:26434
    performConcurrentWorkOnRoot @ react-dom.development.js:25738
    workLoop @ scheduler.development.js:266
    flushWork @ scheduler.development.js:239
    performWorkUntilDeadline @ scheduler.development.js:533
  • react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading ‘useContext’) at Object.useContext (react.development.js:1618:1) at Button (Button.js:224:1) at renderWithHooks ( react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at HTMLUnknownElement.callCallback (react-dom .development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development .js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) useContext @react.development.js:1618 Button @Button.js:224 renderWithHooks @react-dom.development.js:16305 updateForwardRef @react-dom.development.js:19226 beginWork @react-dom.development.js:21636 callCallback @react-dom.development.js:4164 invokeGuardedCallbackDev @react-dom.development.js:4213 invokeGuardedCallback @react-dom.develop .js:4277 b eginWork$1 @ react-dom.development.js:27451 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @react-dom.development.js:26434 performConcurrentWorkOnRoot @react-dom .development.js:25738 workLoop@scheduler.development.js:266 flushWork@schedulr.development.js:239 performWorkUntilDeadline@scheduler.development.js:533

  •     Consider adding an error boundary to your tree to customize error handling behavior.
           Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
           logCapturedError @ react-dom.development.js:18687
           update.callback @ react-dom.development.js:18720
           callCallback @ react-dom.development.js:13923
           commitUpdateQueue @ react-dom.development.js:13944
           commitLayoutEffectOnFiber @ react-dom.development.js:23391
           commitLayoutMountEffects_complete @ react-dom.development.js:24688
           commitLayoutEffects_begin @ react-dom.development.js:24674
           commitLayoutEffects @ react-dom.development.js:24612
           commitRootImpl @ react-dom.development.js:26823
           commitRoot @ react-dom.development.js:26682
           finishConcurrentRender @ react-dom.development.js:25892
           performConcurrentWorkOnRoot @ react-dom.development.js:25809
           workLoop @ scheduler.development.js:266
           flushWork @ scheduler.development.js:239
           performWorkUntilDeadline @ scheduler.development.js:533
           react-dom.development.js:18687 The above error occurred in the <ForwardRef(Button)> component:
               at Button (http://localhost:3000/static/js/bundle.js:48685:59)
               at div
               at Test
               at div
               at App (http://localhost:3000/static/js/bundle.js:37:84)
    
    The above error occurred in the <ForwardRef(Button)> component:
        at Button (http://localhost:3000/static/js/bundle.js:47894:59)
        at div
        at App

EDIT: Sorry for weird formatting of the errors, StackOverflow is being weird with it today, sorry.

Leave a Comment