TypeScript compilation errors

Question

I'm migrating existing React (v15) project from JS to TypeScript 2. I've started by migrating just one React component into TypeScript by changing its extension to .tsx and updating PropTypes to interface.

New dependencies in package.js:

"ts-loader": "^1.0.0",
"typescript": "^2.0.7",
"@types/classnames": "0.0.31",
"@types/node": "^6.0.46",
"@types/react": "^0.14.42",
"@types/react-dom": "^0.14.18",
"@types/react-helmet": "0.0.24",
"@types/react-redux": "^4.4.32",
"@types/react-router": "^2.0.38",
"@types/redux": "^3.6.31"

Webpack loader:

module: {
  loaders: [
    { test: /\.tsx?$/, loader: 'ts-loader'},
    ...
  ]
},
resolve: {
  extensions: ['', '.ts', '.tsx', '.js', '.jsx', '.json']
  ...
}

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "sourceMap": false,
    "inlineSourceMap": true,
    "noEmitHelpers": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

Component Home.jsx:

import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import styles from './Home.scss';

class Home extends React.Component<{
  regions: Array
  ...
}, {}> {
  render() {
    return ...;
  }
}

export default connect(
  state => ({
    ...
  }),
  dispatch => bindActionCreators(...)
)(Home);

I've removed node_modules and run npm install.

But I'm getting a lot of compilation errors listed below. What am I doing wrong?

[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (4,43): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (4,69): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (4,89): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (5,44): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (5,70): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (5,90): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (7,98): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (7,118): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/withRouter.d.ts
[0] (3,45): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/withRouter.d.ts
[0] (3,73): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'StatelessComponent'.
[0] project/web-app/node_modules/@types/react-router/lib/withRouter.d.ts
[0] (3,105): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'PureComponent'.
[0] project/web-app/node_modules/@types/react-router/lib/createMemoryHistory.d.ts
[0] (3,57): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'HistoryOptions'.
[0] project/web-app/node_modules/@types/react-router/lib/createMemoryHistory.d.ts
[0] (3,76): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/useRouterHistory.d.ts
[0] (1,10): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/useRouterHistory.d.ts
[0] (1,19): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'HistoryOptions'.
[0] project/web-app/node_modules/@types/react-router/lib/useRouterHistory.d.ts
[0] (1,35): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'HistoryQueries'.
[0] project/web-app/node_modules/@types/react-router/lib/useRouterHistory.d.ts
[0] (1,51): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'CreateHistory'.
[0] project/web-app/node_modules/@types/react-router/lib/match.d.ts
[0] (6,17): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/match.d.ts
[0] (7,18): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/match.d.ts
[0] (12,16): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/match.d.ts
[0] (16,81): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (4,29): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (5,30): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (6,31): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (7,32): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (8,27): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (9,28): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (10,48): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (11,21): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (14,21): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (19,43): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (20,50): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (21,21): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (22,21): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/RouteUtils.d.ts
[0] (4,16): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/useRoutes.d.ts
[0] (4,48): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'CreateHistory'.
[0] project/web-app/node_modules/@types/react-router/lib/useRoutes.d.ts
[0] (4,69): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'CreateHistory'.
[0] project/web-app/node_modules/@types/react-router/lib/RouteContext.d.ts
[0] (3,35): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Mixin'.
[0] project/web-app/node_modules/@types/react-router/lib/Lifecycle.d.ts
[0] (3,32): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Mixin'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (9,23): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (9,103): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (10,26): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Pathname'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (10,46): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Query'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (14,40): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (20,39): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'HistoryQueries'.
[0] project/web-app/node_modules/@types/react-router/lib/Route.d.ts
[0] (3,10): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/Route.d.ts
[0] (11,40): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/Route.d.ts
[0] (23,35): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/Route.d.ts
[0] (24,42): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/Redirect.d.ts
[0] (10,43): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/Redirect.d.ts
[0] (14,19): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Query'.
[0] project/web-app/node_modules/@types/react-router/lib/Redirect.d.ts
[0] (15,19): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationState'.
[0] webpack built 8ae797e4fda263a74f18 in 22518ms
[0] project/web-app/node_modules/@types/react-router/lib/Redirect.d.ts
[0] (17,38): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/Redirect.d.ts
[0] (18,45): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRoute.d.ts
[0] (10,45): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRoute.d.ts
[0] (13,37): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRoute.d.ts
[0] (14,38): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRoute.d.ts
[0] (18,40): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRoute.d.ts
[0] (19,47): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRedirect.d.ts
[0] (10,45): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRedirect.d.ts
[0] (12,16): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Query'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRedirect.d.ts
[0] (13,16): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationState'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRedirect.d.ts
[0] (15,47): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRedirect.d.ts
[0] (16,40): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (11,39): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'HTMLAttributes'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (11,67): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (12,29): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'CSSProperties'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (15,37): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationDescriptor'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (16,19): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Query'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (17,19): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationState'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (20,34): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (21,41): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (3,5): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'QueryString'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (3,18): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Query'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (4,5): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (4,15): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationDescriptor'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (4,35): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationState'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (5,5): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (6,5): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Pathname'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (6,15): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Path'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (9,32): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (16,30): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactNode'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (23,28): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactType'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (51,38): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (83,26): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/index.d.ts
[0] (10,33): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/index.d.ts
[0] (12,35): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (9,32): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (10,36): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'StatelessComponent'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (11,24): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactNode'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (12,23): error TS2305: Module '"project/web-app/node_modules/redux/lib/index"' has no exported member 'Store'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (13,26): error TS2305: Module '"project/web-app/node_modules/redux/lib/index"' has no exported member 'Dispatch'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (14,31): error TS2305: Module '"project/web-app/node_modules/redux/lib/index"' has no exported member 'ActionCreator'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (107,31): error TS2507: Type '(props: any, context: any, updater: any) => void' is not a constructor function type.
[0] project/web-app/node_modules/@types/react-helmet/index.d.ts
[0] (41,30): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Component'.
[0] project/web-app/node_modules/@types/react-helmet/index.d.ts
[0] (44,35): error TS2507: Type '(props: any, context: any, updater: any) => void' is not a constructor function type.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (9,10): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'ReactInstance'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (9,36): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'ComponentState'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (10,9): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (10,23): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'SFCElement'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (10,35): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'CElement'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (11,10): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'DOMAttributes'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (11,25): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'DOMElement'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (25,34): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (32,33): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (32,82): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (43,26): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (47,63): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (48,26): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (53,26): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (58,26): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (61,33): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (61,82): error TS2304: Cannot find name 'Component'.

TypeScript compilation errors

Answers (1)

Related Questions