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

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 2

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 3

Yes sure. My main component App is responsible for loading all Providers.

I preferred to keep this logic separate so that the routes would have their own file to facilitate maintenance.

import { QueryClient, QueryClientProvider } from 'react-query'
import reactQuery from '@config/react-query'

import { ApiProvider } from 'templates/context/api-state'
import { SessionStateProvider } from 'templates/context/session-state'

import AppRouter from './AppRouter'

const queryClient = new QueryClient(reactQuery)

const App: React.FC = () => {
  return (
    <>
      <QueryClientProvider client={queryClient}>
        <SessionStateProvider>
          <ApiProvider>
            <AppRouter />
          </ApiProvider>
        </SessionStateProvider>
      </QueryClientProvider>
    </>
  )
}

export default App

import { Suspense } from 'react'
import { BrowserRouter as Router, Switch } from 'react-router-dom'

import LoadingApplication from 'components/loading/LoadingApplication'

const AppRouter: React.FC = () => {
  {/* ... code */}

  return (
    <Router>
      <Suspense fallback={<LoadingApplication />}>
        <Switch>
          {/* ... ROUTES */}
        </Switch>
      </Suspense>
    </Router>
  )
}

export default AppRouter