'Router' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element

Question

when npm build process is running below error 'Router' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element. is occurred. what could be the reason?

I am using node v14.18.3. package.json file is shown below.
I updated react-intl package but didnt get any result and this is happened in devOps build server.

Creating an optimized production build...
  Failed to compile.
  
  D:/a/1/s/ClientApp/src/App.tsx
  TypeScript error in D:/a/1/s/ClientApp/src/App.tsx(20,6):
  'Router' cannot be used as a JSX component.
    Its instance type 'BrowserRouter' is not a valid JSX element.
      The types returned by 'render()' are incompatible between these types.
        Type 'React.ReactNode' is not assignable to type 'import("D:/a/1/s/ClientApp/node_modules/react-intl/node_modules/@types/react/index").ReactNode'.  TS2786
  
      18 | export default function App() {
      19 |   return (
    > 20 |     <Router>
         |      ^
      21 |       <Switch>
      22 |         <Route exact path="/"></Route>
      23 |         <Route path="/StaticTabs/MainTab" component={MainTab}></Route>
  
  
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! [email protected] build: `react-scripts build`

package.json

{
  "name": "abs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fluentui/react-northstar": "^0.63.0",    
    "@microsoft/teams-js": "^1.11.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/microsoftteams": "^1.9.2", 
    "axios": "^0.21.1",
    "lodash": "^4.17.21",
    "msteams-react-base-component": "^1.1.1",
    "office-ui-fabric-react": "^7.181.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-hook-form": "^7.25.1",
    "react-intl": "^5.24.4",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^4.0.3",
    "react-select": "^5.2.2",
    "read-appsettings-json": "^1.0.98",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/es6-promise": "^3.3.0",
    "@types/jest": "^27.4.0",
    "@types/lodash": "^4.14.182",
    "@types/node": "^16.11.21",
    "@types/react": "^16.8.6",
    "@types/react-dom": "^16.8.12",
    "@types/react-router-dom": "^5.1.7",
    "cross-env": "^7.0.3",
    "env-cmd": "^10.1.0",
    "typescript": "^4.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "@typescript-eslint/no-array-constructor": "off",
      "array-callback-return": "off",
      "no-mixed-operators": "off",
      "no-empty-pattern": "off",
      "jsx-a11y/anchor-is-valid": "off"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Chiquia

when I move some packages dependencies to devDependencies, it works for me but not sure that is the correct answer – Stewardson

Have you managed to resolve this issue? – Abstergent

Answer 1

Your react-router-dom is at version "^5.2.2" while your @types/react-router-dom is set to "^5.1.7".

There is also a difference in your react-dom versions. Your react-dom is at version "^16.8.6" while your @types/react-dom is set to "^16.8.12".

Try doing: npm i react@16 react-dom@16 react-router-dom@5 @types/react@16 @types/react-dom@16 @types/react-router-dom@5

Cordes

I checked this changes but error is still occurred – Stewardson

package version and @types version don't need to be exactly matched. – Tunny