TS2605 error when importing react class components from legacy jsx files.

[rdarder]

In the context of migrating a react js app to typescript, we have a mix of legacy jsx files and tsx files.
When on a tsx file I import a component in a jsx file is a class extending React.Component, I get the following error:

src/client.tsx(5,10): error TS2605: JSX element type 'Sample' is not a constructor function for JSX elements.
  Property 'setState' is missing in type 'Sample'.

TypeScript Version: 2.2.2
Code

legacy.jsx

import * as React from 'react'

export class Sample extends React.Component {
  constructor(props){
    super(props)
  }
  render(){
    return <div/>
  }
}

client.tsx

import {Sample} from './legacy'
import * as React from 'react'

function UseSample(){
  return <Sample/>
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "outDir": "./dist/tsc/",
    "lib": [
      "DOM",
      "ES5",
      "ScriptHost"
    ],
    "jsx": "react",
    "sourceMap": true,
    "removeComments": false,
    "moduleResolution": "Node",
    "allowJs": true
  },
  "include": [
    "src/**/*"
  ]
}

alternatively, find this setup here: https://github.com/rdarder/ts-react-jsx-bug

Note that if instead of extending React.Component I do
export const Sample = React.CreateClass({...})
the project builds fine. I am not sure if this is an issue with @types/react instead

[mhegazy]

Should be fixed by #14832

[alecmerdler]

I am still seeing this issue when using ES6 import syntax in .tsx files to import components that extend React.Component in .jsx files, using typescript@2.5.1. I see variations of error TS2607: JSX element class does not support attributes because it does not have a 'props' property. as well.

I have also tried adding @augments {React.Component<any, any>} to the JS class (from this comment) but it has no effect.

Current workaround is to const {SomeComponent} = require('some-module');, but I know there is something I am missing. Any suggestions?

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "outDir": "./public/dist/build/",
    "target": "es5",
    "lib": ["dom", "es2015"],
    "jsx": "react",
    "allowJs": true,
    "pretty": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "**/*.js",
    "**/*.jsx",
    "**/*.ts",
    "**/*.tsx"
  ]
}

[mhegazy]

@alecmerdler i am unable to reproduce this locally. please log a new issue and give us some more context.

[alecmerdler]

Okay, I have created a new issue and repo #18134.

[benrudolph]

FWIW, I was also experiencing this issue with legacy JSX files. However changing this:

MyComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

export default MyComponent;

to:

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

fixed the issue. ¯_(ツ)_/¯