Material ui not loading in react js code and give errors in console-CodePudding

i get errors saying

react.development.js:1476 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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476)
    at useContext (react.development.js:1484)
    at emotion-element-699e6908.browser.esm.js:34
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
resolveDispatcher @ react.development.js:1476
useContext @ react.development.js:1484
(anonymous) @ emotion-element-699e6908.browser.esm.js:34
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:9
options.factory @ react refresh:6
_webpack_require_ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 The above error occurred in the <MuiButtonRoot> component:

    at http://localhost:6251/static/js/bundle.js:51472:66
    at Button (http://localhost:6251/static/js/bundle.js:2441:59)
    at div
    at div
    at Sidebar
    at div
    at div
    at App

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.

the error comes when i use material ui in sidebar.js, in this example the button component Contained its on 10th line of Sidebar.js and removing it and replacing it with things like h1 make the code work

Sidebar.js (i am pretty sure the ISSUE IS HERE)

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


function Sidebar() {
    return (
    <div className='sidebar'>
        <div className="sidebar-header">
        <Button variant="contained">Contained</Button>
        <p> test text </p>
        </div>
        <div className="sidebar-search">

        </div>
        <div className="sidebar-chats">

        </div>

        </div>);
}

export default Sidebar

App.js (WHERE SIDEBAR IS IMPORTED TO RUN, i am pretty sure the issue is in Sidebar.js)

import React from 'react';
import './App.css';
import Sidebar from './Sidebar';


function App() {
  return (
    <div className="App">
    <div className="App-body">
      <Sidebar />
    </div>
    </div>
  );
}

export default App;

please help me with the issue if you know how to fix it

EDIT 1: PACKAGE JSON FILE

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@mui/icons-material": "^5.2.5",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^9.6.1",
    "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"
    ]
  },
  "devDependencies": {
    "eslint-plugin-react-hooks": "^4.3.0"
  }
}

CodePudding user response：

Have you checked these ?

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

CodePudding user response：

UPDATE:

uninstalled and reinstalled material ui packages and it works now.

CodePudding user response：

Your import is incorrect. Please replace with this line to resolve the issue.

import Button from '@mui/material/Button';

I generally get hook issues if the imports are incorrect or the package is not correctly installed.