Its instance type 'BrowserRouter' is not a valid JSX element

Question

I work on a project developed in React + coreui that has always worked perfectly. However, in the last week, I had an inexplicable problem when deploying a modification.

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         |      ^

I haven't modified anything in the project's structure or dependencies that could generate this error.

I believe there is some dependency conflict because from that moment on, it happens constantly.

I've tried many alternatives to try to solve the problem, but so far, without success. Has anyone experienced this and know of a solution? Or Do you know where to find the problem?

  "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

There is another similar question where the user updates the version of react and react-dom.

Some components "cannot be used as a JSX component"

I can't implement this solution as I have dependencies that are incompatible with newer versions.

Answer 2

I FOUND THE SOLUTION!!!

the packages

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

were imported into devDependencies.

We transferred this import to dependencies, cleared the cache from the deploy server and everything went back to normal.

Answer 3

try adding "@types/react" in the "resolutions" section of your package.json

this fixed my problem cause the dependencies of "@types/react-dom" on my package.lock.json is referencing "@types/react" version:"*".

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

Hope this helps.