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"
  }

Mum

Can you show the code where it throws the error? – Soothsay

Im having very similar issues. I thought I had solved it via updating individual packages and using npm install --force but now I am getting these errors although the app is compiling. – Ringtailed

I haven't figured out exactly what's going on, but I'm using React v18.2.0 and this error is triggered by upgrading @types/react and @types/react-dom from 17.0.x to 18.0.x. (I can still use React 18 Suspense and concurrent mode with 17.0.x @types.) Upgrading @types/react-router-dom from ^5.1.5 to ^5.3.3 doesn't help or hurt. – Pemphigus

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.

Mum

Answer 2

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:"*". Referencing * was like most of DefinitelyTyped libraries do it. Not really sure why this fixed my issue.

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

Hope this helps.

Balzac

Answer 3

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.

Mum

this solution makes zero sense – Shandy

This answer is wrong, typescript is a developer tools and any ts dependencies should always only be in devDependencies. There is no point why they should be in the final build. – Marquee