Uncaught Error:Invalid hook call hooks can only called inside the function-CodePudding

Whenever i used material ui icons or @mui/material i have an err msg on console like "invalid hook call hooks can only be used inside of the function" I tried to delete the node modules and re installed it but it wont help at all.what should i do help me pls

I tried to create a new project and also this error happens in this project too

and this is my package.json

{
  "name": "pro1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "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"
    ]
  }
}

npm list react react-dom

 -- @mui/[email protected] extraneous
|  -- [email protected] deduped
| `-- [email protected] deduped
 -- @mui/[email protected] extraneous
| `-- [email protected] deduped
 -- @mui/[email protected] extraneous
|  -- [email protected] deduped
| `-- [email protected] deduped
 -- @mui/[email protected] extraneous
| `-- [email protected] deduped
 -- @mui/[email protected] extraneous
| `-- [email protected] deduped
 -- @mui/[email protected] extraneous
| `-- [email protected] deduped
 -- @mui/[email protected] extraneous
| `-- [email protected] deduped
 -- @testing-library/[email protected]
|  -- [email protected] deduped
| `-- [email protected] deduped
 -- [email protected]
| `-- [email protected] deduped
 -- [email protected]
| `-- [email protected] deduped
`-- [email protected]

This is my code

import './App.css';
import Search from '@mui/icons-material/Search'
import React from 'react'

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

export default App;

and this is the result

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.
    React 2
    node_modules main.c54d11979ed52db2dba6.hot-update.js:8332
    React 14
    performReactRefresh react-refresh-runtime.development.js:304
    performReactRefresh react-refresh-runtime.development.js:293
    node_modules bundle.js:5433
    setTimeout handler*enqueueUpdate RefreshUtils.js:83
    executeRuntime RefreshUtils.js:243
    $ReactRefreshModuleRuntime$ main.c54d11979ed52db2dba6.hot-update.js:61
    js main.c54d11979ed52db2dba6.hot-update.js:74
    factory react refresh:6
    Webpack 29
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.
    React 2
    node_modules main.c54d11979ed52db2dba6.hot-update.js:8332
    React 15
    performReactRefresh react-refresh-runtime.development.js:304
    performReactRefresh react-refresh-runtime.development.js:293
    node_modules bundle.js:5433
    setTimeout handler*enqueueUpdate RefreshUtils.js:83
    executeRuntime RefreshUtils.js:243
    $ReactRefreshModuleRuntime$ main.c54d11979ed52db2dba6.hot-update.js:61
    js main.c54d11979ed52db2dba6.hot-update.js:74
    factory react refresh:6
    Webpack 29
react.development.js:1476
The above error occurred in the <MuiSvgIconRoot> component:

../../../../node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js/withEmotionCache/<@http://localhost:3000/main.c54d11979ed52db2dba6.hot-update.js:8332:66
SvgIcon@http://localhost:3000/main.c54d11979ed52db2dba6.hot-update.js:212:82
SearchIcon
div
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. react-dom.development.js:18687
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.
    React 2
    node_modules main.c54d11979ed52db2dba6.hot-update.js:8332
    React 12
    performReactRefresh react-refresh-runtime.development.js:304
    performReactRefresh react-refresh-runtime.development.js:293
    node_modules bundle.js:5433
    setTimeout handler*enqueueUpdate RefreshUtils.js:83
    executeRuntime RefreshUtils.js:243
    $ReactRefreshModuleRuntime$ main.c54d11979ed52db2dba6.hot-update.js:61
    js main.c54d11979ed52db2dba6.hot-update.js:74
    factory react refresh:6
    Webpack 29
react.development.js:1476

CodePudding user response：

this error when occurring that you call hooks outside of hooks (custom hooks) or react components it doesn't seem this error related to MAU icons

you should check your codes to see where you called hooks outside of hooks or components

CodePudding user response：

In the context of React, hooks are functions that allow you to use state and other React features in functional components. They are called inside the body of a functional component, and they must be called at the top level of the component, not inside loops, conditions, or nested functions.