React 18中使用MUI Button触发Invalid hook call错误求助

问题场景 #

在React JS项目中导入并使用@mui/material/Button组件时，触发Invalid hook call错误，尝试更新依赖后问题仍存在，最终解决后组件可正常运行。

App.js代码 #

import logo from './logo.svg';
import './App.css';
import useFetch from './hooks/useFetch';
import Button from '@mui/material/Button';

function App() {
  const { data: dataFromBackend, loading } = useFetch('http://localhost:5000/api/test');

  return (
    <div className="App">
      <header className="App-header">
        {/* {dataFromBackend.message} */}
        <br />
        <Button>Ola Test</Button>
        BasicButtons
      </header>
    </div>
  );
}

export default App;

运行报错信息 #

Uncaught runtime errors:
× 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. 你可能使用了版本不匹配的React和渲染器（如React DOM）
2. 你可能违反了Hooks的使用规则
3. 你的应用中可能存在多份React副本

错误堆栈：
at resolveDispatcher (http://localhost:3000/main.e654d662f5eb41baafa8.hot-update.js:12350:17)
at Object.useContext (http://localhost:3000/main.e654d662f5eb41baafa8.hot-update.js:12356:24)
at Button (http://localhost:3000/main.e654d662f5eb41baafa8.hot-update.js:3544:59)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:21482:22)
at updateForwardRef (http://localhost:3000/static/js/bundle.js:24053:24)
at beginWork (http://localhost:3000/static/js/bundle.js:26100:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:11074:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:11118:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:11175:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:31049:11)

项目package.json内容 #

{
    "name": "frontend",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.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": "concurrently \"npm run backend\" \"npm run frontend\"",
        "backend": "python ../backend/main.py",
        "frontend": "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"
        ]
    }
}

解决方法 #

核心原因是React 18与部分旧版本Material UI存在兼容性问题，且项目未正确安装Material UI的完整依赖。执行以下命令安装适配React 18的Material UI核心依赖：

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

安装完成后重启项目，即可正常使用@mui/material/Button组件。

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