我花了一天时间试图解决一些对等依赖问题。在开发模式下运行正常,但当我构建时,我得到了这样的错误“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错误,但当我构建时,构建实际上并不工作。在开发模式下一切都很好-我希望我能打包那个模型。非常感谢您的帮助
1条答案
按热度按时间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主版本的类型定义。