2

After installing react-router-dom and history with yarn, installing their respective type definitions (@types/react-router-dom and @types/history), I am reading the following errors. Can anyone help me resolve them because I am not too sure how to add 'construct or call signatures' nor do I understand what's wrong with the component I pass to my Route component.

Here are the errors:

Failed to compile.

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(40,35): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(46,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(56,31): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(74,28): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(79,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(87,35): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(92,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts
(33,31): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts
(40,28): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts
(46,22): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts
(55,25): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in ./src/index.tsx
(28,6): error TS2604: JSX element type 'Router' does not have any construct or call signatures.

Error in ./src/index.tsx
(29,8): error TS2604: JSX element type 'Switch' does not have any construct or call signatures.

Error in ./src/index.tsx
(30,10): error TS2604: JSX element type 'Route' does not have any construct or call signatures.

Here is the file:

// React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Route, Router, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';


// Redux
import { Provider } from 'react-redux';

// Custom
import Home from './containers/Home';

// Styles
import './styles.css';

// Store
import { configureStore } from './store';

// Configure Store
const store = configureStore();

const history = createBrowserHistory();

// Render
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Switch>
        <Route exact path='/' component={Home} />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('root') as HTMLElement
);

and here is my package.json:

{
  "name": "eai-reactjs-typescript-redux-starter",
  "description": "A ReactJS/TypeScript + Redux starter template with a detailed README describing how to use these technologies together and constructive code comments.",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "amazon-cognito-identity-js": "^1.19.0",
    "amazon-cognito-js": "^1.1.0",
    "aws-sdk": "^2.80.0",
    "history": "^4.6.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.1",
    "redux": "^3.7.0",
    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "@types/enzyme": "^2.8.0",
    "@types/history": "^4.6.0",
    "@types/jest": "^19.2.3",
    "@types/node": "^7.0.18",
    "@types/react": "^15.0.24",
    "@types/react-dom": "^15.5.0",
    "@types/react-redux": "^4.4.40",
    "@types/react-router-dom": "^4.0.5",
    "@types/redux-logger": "^3.0.0",
    "enzyme": "^2.8.2",
    "react-addons-test-utils": "^15.5.1",
    "react-scripts-ts": "1.4.0",
    "redux-devtools-extension": "^2.13.2"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  }
}

Here's a link to my github repo if anyone wants a closer look at all of the code.

1 Answer 1

7

I had the same problem. Running npm install @types/react @types/react-dom --save-dev to update those packages fixed it.

Sign up to request clarification or add additional context in comments.

1 Comment

Wow. I just had to update those two packages @types/react and @types/react-dom. The installed versions I had -- @types/react (^15.0.24) and @types/react-dom (^15.5.0) -- needed to be updated to: @types/react (^15.0.34) and @types/react-dom (^15.5.1).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.