我在React+coreui中开发的一个项目一直运行良好。然而，在上周，我在部署修改时遇到了一个莫名其妙的问题。
18:03:11 Creating an optimized production build...
18:04:32 Failed to compile.
18:04:32
18:04:32 /var/lib/jenkins/workspace/deploy-sandbox/src/AppRouter.tsx
18:04:32 Type error in /var/lib/jenkins/workspace/deploy-sandbox/src/AppRouter.tsx(47,6):
18:04:32 'Router' cannot be used as a JSX component.
18:04:32 Its instance type 'BrowserRouter' is not a valid JSX element.
18:04:32 The types returned by 'render()' are incompatible between these types.
18:04:32 Type 'React.ReactNode' is not assignable to type 'import("/var/lib/jenkins/workspace/deploy-sandbox/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. TS2786
18:04:32
18:04:32 45 |
18:04:32 46 | return (
18:04:32 > 47 | <Router>
18:04:32 | ^
我没有修改项目结构或依赖项中可能产生此错误的任何内容。
我相信存在一些依赖冲突，因为从那一刻起，这种冲突不断发生。
为了解决这个问题，我尝试了很多替代方案，但到目前为止都没有成功。有人经历过这种情况并知道解决方案吗？或者你知道在哪里可以找到问题吗？
"dependencies": {
"@coreui/chartjs": "^3.0.0",
"@coreui/coreui-pro": "^3.4.2",
"@coreui/coreui": "^4.1.3",
"@coreui/icons-pro": "^2.0.3",
"@coreui/icons-react": "^1.1.0",
"@coreui/icons": "^2.1.0",
"@coreui/react-chartjs": "^1.1.0",
"@coreui/react": "^3.4.6",
"@coreui/utils": "^1.3.1",
"del": "^6.0.0",
"gulp-zip": "^5.1.0",
"gulp": "^4.0.2",
"http-status": "^1.5.0",
"moment": "^2.29.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.29.0",
"react-imask": "^6.4.2",
"react-papaparse": "^3.18.2",
"react-password-strength-bar": "^0.4.0",
"react-query": "^3.34.19",
"react-router-dom": "^5.3.0",
"react-router": "^5.2.1",
"react-scripts": "^5.0.0",
"react-select": "^5.2.2",
"react": "^17.0.2",
"spinkit": "^2.0.1",
"use-debounce": "^7.0.1",
"web-vitals": "^2.1.4"
},
"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"
],
"sass": "^1.32.8"
},
"eslint-config-prettier": "=8.3.0",
"devDependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.0",
"@types/node": "^17.0.7",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.2",
"@types/react-select": "^5.0.1",
"@typescript-eslint/eslint-plugin": "^5.8.1",
"eslint-config-airbnb": "^18.2.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-react": "=7.28.0",
"http-proxy-middleware": "^2.0.1",
"sass": "^1.45.2",
"typescript": "^4.5.4"
}
还有另一个类似的问题，用户更新react和react dom的版本。
一些部件"；不能用作JSX组件"；
我无法实现此解决方案，因为我有与较新版本不兼容的依赖项。
尝试添加"类型/反应"；在"；决议"；.json
这修复了我的问题，导致"@types/react dom"；在我的软件包上，lock.json引用了"@类型/反应"；版本："*&">Referencing*就像大多数确定性类型库一样。不确定为什么这解决了我的问题。
"resolutions": {
"@types/react": "17.0.38"
},
希望这能有所帮助。
我找到了解决方案
包装
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
已导入devDependencies。
我们将此导入转移到依赖项，从部署服务器中清除缓存，一切恢复正常。