它的实例类型“BrowserRouter”不是有效的 JSX 元素

Question

我从事一个使用 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"
  }

Answer 1

还有另一个类似的问题是用户更新 react 和 react-dom 的版本。

某些组件“不能用作 JSX 组件”

我无法实现此解决方案，因为我的依赖项与较新版本不兼容。

Answer 2

我找到了解决方案！！！

包裹

       "@types/react": "^17.0.38",
       "@types/react-dom": "^17.0.11",

被导入到 devDependencies。

我们将此导入转移到依赖项，从部署服务器清除缓存，一切恢复正常。

Answer 3

尝试在 package.json 的“分辨率”部分添加“@types/react”

这解决了我的问题，导致“@types/react-dom”对我的 package.lock.json 的依赖关系引用“@types/react”版本：“*”。

"resolutions": {
    "@types/react": "17.0.38"
},

希望这可以帮助。