TS1238 after upgrading to react 16

Question

I am starting a new project and found a good but a bit outdated boilerplate (https://github.com/rokoroku/react-redux-typescript-boilerplate) for react - redux and typescript. I updated the package.json using node-check-updates to this:

{
  "name": "typescript-react-redux-boilerplate",
  "version": "1.0.0",
  "private": true,
  "description": "A frontend boilerplate with React, Redux and Typescript",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --debug --devtool cheap-module-source-map --output-pathinfo --history-api-fallback --hot --inline --progress --colors --port 3000 --open",
    "build": "webpack -p --progress --colors"
  },
  "license": "MIT",
  "devDependencies": {
    "@types/classnames": "2.2.3",
    "@types/history": "4.6.0",
    "@types/node": "8.0.34",
    "@types/react": "^16.0.10",
    "@types/react-dom": "16.0.1",
    "@types/react-redux": "5.0.10",
    "@types/react-router": "4.0.15",
    "@types/redux-actions": "2.2.2",
    "@types/webpack": "3.0.13",
    "@types/webpack-env": "1.13.2",
    "awesome-typescript-loader": "^3.2.3",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "postcss": "^6.0.13",
    "postcss-browser-reporter": "^0.5.0",
    "postcss-cssnext": "^3.0.2",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.7",
    "postcss-reporter": "^5.0.0",
    "postcss-url": "^7.1.2",
    "react-hot-loader": "^3.0.0",
    "style-loader": "^0.19.0",
    "typescript": "^2.5.3",
    "url-loader": "^0.6.2",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.1"
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "redux": "^3.7.2",
    "redux-actions": "^2.2.1"
  }
}

The container-code is unchanged and looks like this:

import * as React from 'react';
import * as TodoActions from '../../actions/todos';
import * as style from './style.css';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import { RootState } from '../../reducers';
import { Header, MainSection } from '../../components';

export namespace App {
  export interface Props extends RouteComponentProps<void> {
    todos: TodoItemData[];
    actions: typeof TodoActions;
  }

  export interface State {
    /* empty */
  }
}

@connect(mapStateToProps, mapDispatchToProps)
export class App extends React.Component<App.Props, App.State> {

  render() {
    const { todos, actions, children } = this.props;
    return (
      <div className={style.normal}>
        <Header addTodo={actions.addTodo} />
        <MainSection todos={todos} actions={actions} />
        {children}
      </div>
    );
  }
}

function mapStateToProps(state: RootState) {
  return {
    todos: state.todos
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions as any, dispatch)
  };
}

The error:

ERROR in [at-loader] ./src/containers/App/index.tsx:21:1
    TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<Props, "history" | "location" | "match" | "staticContext">> & { WrappedCompon...' is not assignable to type 'typeof App'.
    Type 'Component<Pick<Props, "history" | "location" | "match" | "staticContext">, ComponentState>' is not assignable to type 'App'.
      Types of property 'render' are incompatible.
        Type '() => string | number | false | Element | Element[]' is not assignable to type '() => Element'.
          Type 'string | number | false | Element | Element[]' is not assignable to type 'Element'.
            Type 'string' is not assignable to type 'Element'.
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  26.5 kB       0
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 222 bytes {0} [built]
webpack: Failed to compile.

I'm unable to find a solution for this.

Answer 1

I see this kind of thing from time to time when an @types version doesn't jive with a library version. I cloned the boilerplate project, and using your package.json above, I experience the same error. I also saw this in the build log:

ERROR in [at-loader] ./node_modules/@types/react-redux/index.d.ts:143:22
    TS2451: Cannot redeclare block-scoped variable 'connect'.

This made @types/react-redux an immediate suspect. Version 5.0.10 was published less than two weeks ago.

And sure enough, the project builds okay for me if I dial the @types/react-redux dependency down to version 5.0.9.