解决NPM中构建的对等依赖关系

xe55xuns  于 9个月前  发布在  其他
关注(0)|答案(1)|浏览(74)

我花了一天时间试图解决一些对等依赖问题。在开发模式下运行正常,但当我构建时,我得到了这样的错误“error TS 2786:'Chart' cannot be used as a JSX component. Its type 'typeof Chart' is not a valid JSX element type."。有问题的图表是react-google-charts chart,所以它肯定是一个有效的jsx元素。当运行npm run build时,我得到:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @material-ui/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!   peer react@"^17.0.0 || ^18.0.0" from @mui/[email protected]
npm ERR!   node_modules/@mui/utils
npm ERR!     @mui/utils@"^5.14.19" from @mui/[email protected]
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"^5.14.19" from the root project
npm ERR!       1 more (@mui/icons-material)
npm ERR!     @mui/utils@"^5.14.19" from @mui/[email protected]
npm ERR!     node_modules/@mui/system
npm ERR!       @mui/system@"^5.14.19" from @mui/[email protected]
npm ERR!       node_modules/@mui/material
npm ERR!         @mui/material@"^5.14.19" from the root project
npm ERR!         1 more (@mui/icons-material)
npm ERR!     2 more (@mui/private-theming, @mui/base)
npm ERR!   15 more (react-router-dom, @emotion/react, react-native-web, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm ERR! node_modules/@material-ui/core
npm ERR!   @material-ui/core@"^4.12.4" from the root project
npm ERR!   peer @material-ui/core@"^4.0.0" from @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/icons
npm ERR!     @material-ui/icons@"^4.11.3" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"^4.12.4" from the root project
npm ERR!     peer @material-ui/core@"^4.0.0" from @material-ui/[email protected]
npm ERR!     node_modules/@material-ui/icons
npm ERR!       @material-ui/icons@"^4.11.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

字符串
我的package.json是:

{
  "name": "react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions",
    "start": "electron ."
  },
  "dependencies": {
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.5.0",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@mui/icons-material": "^5.14.19",
    "@mui/material": "^5.14.19",
    "electron": "^27.1.3",
    "html2canvas": "^1.3.1",
    "jspdf": "^2.5.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-native-web": "^0.19.9",
    "react-router-dom": "^6.2.1"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "@vitejs/plugin-react": "^4.1.0",
    "eslint": "^8.3.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^4.6.5",
    "vite": "^5.0.0"
  }
}


我已经尝试了各种重新安装,缓存清除,--force和--legacy-peer-deps标签,似乎没有什么能完全修复它。我也尝试了抑制ts错误,但当我构建时,构建实际上并不工作。在开发模式下一切都很好-我希望我能打包那个模型。非常感谢您的帮助

2o7dmzc5

2o7dmzc51#

您正在使用Material UI的deprecated version,它仅适用于React 16或React 17,并已于2021年9月停止接收更新。
要在React 18中使用Material UI,您需要使用its latest version(目前为v5.14.19)。
如果出于任何原因,你想继续使用Material UI v4.12.4,你必须将React降级到最新的稳定版v16或最新的稳定版v17
作为旁注,使用React 18和React 17类型定义可能会导致意外的行为和构建错误。请使用项目中使用的React主版本的类型定义。

相关问题