React 18.x下无法解析'@material-ui/lab'错误的解决方法

我尝试实现全局告警功能，出现了如下错误：

ERROR in ./src/components/snackbar/Alert.js 5:0-82 Module not found: Error: Can't resolve '@material-ui/lab' in '\src\components\snackbar'

我使用的React版本是"react": "^18.2.0"，看起来是缺少@material-ui/lab，但我已经执行过npm install @mui/lab @mui/material，问题依然存在，请问如何在不降级React版本的情况下解决这个问题？

我的package.json内容如下：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.11",
    "@mui/lab": "^5.0.0-alpha.122",
    "@mui/material": "^5.11.12",
    "@mui/x-data-grid": "^6.0.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.4",
    "qs": "^6.11.1",
    "react": "^18.2.0",
    "react-circular-progressbar": "^2.1.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.2",
    "react-scripts": "5.0.1",
    "recharts": "^2.4.3",
    "sass": "^1.58.3",
    "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"
    ]
  }
}

问题核心是包名路径不匹配：你安装的是MUI v5的@mui/lab，但代码里引用的是旧版Material-UI的@material-ui/lab，两者属于不同版本的包体系，无法互通。

按以下步骤解决：

• 修正代码导入路径
  找到Alert.js中所有从@material-ui/lab导入的语句，替换为@mui/lab。示例：

  // 旧代码
  import { Alert } from '@material-ui/lab';
  // 替换为
  import { Alert } from '@mui/lab';
  

  如果代码中还有@material-ui/core这类旧版包的导入，也要同步替换为@mui/material。

• 清理缓存并重装依赖
  执行命令确保依赖安装无异常：

  rm -rf node_modules package-lock.json
  npm install
  

• 版本兼容性验证
  你的@mui/lab版本5.0.0-alpha.122和@mui/material版本5.11.12是兼容的，React 18.2.0与MUI v5完全适配，不需要降级React版本。

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