使用MUI图标与组件时触发Invalid hook call错误，求解决方案

使用@mui/icons-material或@mui/material组件时，控制台抛出以下错误：

Invalid hook call. Hooks can only be called inside of the body of a function component.

尝试删除node_modules并重新安装依赖无效，新建React项目测试仍出现该错误。

项目配置与信息 #

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/base@5.0.0-alpha.111 extraneous
| +-- react-dom@18.2.0 deduped
| `-- react@18.2.0 deduped
+-- @mui/icons-material@5.11.0 extraneous
| `-- react@18.2.0 deduped
+-- @mui/material@5.11.1 extraneous
| +-- react-dom@18.2.0 deduped
| `-- react@18.2.0 deduped
+-- @mui/private-theming@5.11.1 extraneous
| `-- react@18.2.0 deduped
+-- @mui/styled-engine@5.11.0 extraneous
| `-- react@18.2.0 deduped
+-- @mui/system@5.11.1 extraneous
| `-- react@18.2.0 deduped
+-- @mui/utils@5.11.1 extraneous
| `-- react@18.2.0 deduped
+-- @testing-library/react@13.4.0
| +-- react-dom@18.2.0 deduped
| `-- react@18.2.0 deduped
+-- react-dom@18.2.0
| `-- react@18.2.0 deduped
+-- react-scripts@5.0.1
| `-- react@18.2.0 deduped
`-- react@18.2.0

测试代码

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;

控制台错误信息

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

解决方案 #

从依赖列表可见，所有MUI相关包都标记为extraneous，说明这些包未添加到项目package.json的依赖中，大概率是全局安装的MUI被项目引用，导致React实例不统一，触发hook调用错误。按以下步骤修复：

1. 卸载全局MUI依赖
   执行命令删除全局安装的MUI包：

   npm uninstall -g @mui/material @mui/icons-material
   

2. 本地安装完整MUI依赖
   在项目根目录安装MUI核心依赖及样式引擎：

   npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
   

3. 清理缓存并重装依赖
   清理npm缓存，删除现有依赖文件后重新安装：

   npm cache clean --force
   rm -rf node_modules package-lock.json
   npm install
   

4. 重启项目
   执行npm start重启开发服务器，测试组件是否正常渲染。

若问题仍存在，检查项目是否有嵌套的node_modules目录（如子目录下的依赖），确保整个项目只有根目录下的一套React依赖。

内容的提问来源于stack exchange，提问作者Mohamed