CODEWITHSUNDEEP
javascriptreactjstypescriptreact-routerreact-dom
Robert Hovhannisyan
Robert Hovhannisyan

Reputation: 3341

Type 'BrowserRouter' is missing the following properties... - TypeScript

I'm learning TypeScript and I'm trying to add TypeScript into my pet project. In the ReactDOM.render function call I'm getting this error:

No overload matches this call. The last overload gave the following error.

Argument of type 'BrowserRouter' is not assignable to parameter of type 'ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => Component<any, any, any>)>[]'.

Type 'BrowserRouter' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => Component<any, any, any>)>[]': length, pop, push, concat, and 26 more.

Here is the code:

import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';

import App from "./App";
import configureStore from './store';

const store = configureStore();

ReactDOM.render(
    <Router>
        <Provider store={store}>
            <App />
        </Provider>
    </Router>, 
    document.getElementById("root")
);

package.json

{
  "name": "WhatToCook",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.12.13",
    "@babel/core": "^7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "@types/react-dom": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^1.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "lodash": "^4.17.20",
    "react": "^17.0.1",
    "react-addons-update": "^15.6.3",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "react-jss": "^10.5.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }
}

I tried to install the type dependencies for all packages that I'm using in this file but it doesn't help.

Upvotes: 2

Views: 552

Answers (1)

Filip Huhta
Filip Huhta

Reputation: 2388

If you add typescript and if you have JSX inside your component or component test file must have .tsx as your file extension. The code can not compile if you have the .ts file extension. So if that's your case rename it to .tsx.

Downgrading to 15.04 version of React type definitions could also work see this thread: Allow SFC to return null

Upvotes: 1

Related Questions