Error Importing ES6 Class Extending React.Component into TSX

[alecmerdler]

Moved from: microsoft/TypeScript#18134

Encountering errors using webpack when importing ES6 classes that extend React.Component into TSX. Entry file is app.jsx.

Compiler outputs working code, and current solution is adding ignoreDiagnostics: [2605, 2607] to ts-loader options in Webpack config.

TypeScript Version: 2.4.2
ts-loader Version: 2.3.4

Code
https://github.com/alecmerdler/tsx-jsx

Expected behavior:

• tsc with no errors
• webpack with no errors

Actual behavior:

• tsc: no errors
• webpack: error TS2605: JSX element type 'Hello' is not a constructor function for JSX elements. Property 'setState' is missing in type 'Hello'.
  and
  error TS2607: JSX element class does not support attributes because it does not have a 'props' property.

[johnnyreilly]

Thanks for the detailed repro - we appreciate it. I've taken a look and can't see any obvious problems. That said I use tsx rather than jsx and I'm not too clear on what problems might present when using jsx combined with the react types. If you could investigate further that would be awesome. To be honest though, if you're using TypeScript I'd take to leap and move to using TSX instead of JSX 😄

[alecmerdler]

You were able to run npm run dev without any compilation errors? Let me know if you need me to make any changes.

We are introducing TypeScript/TSX to an exising ES6/JSX React application. After scouring the TypeScript GitHub repo for issues similar to mine, I haven't found any solutions. What indicates that it is a problem with ts-loader is that running tsc does not yield the same errors. Additionally, annotating the JSX components with /** @augments {React.Component<any, any>} */ has no effect. I am genuinely stumped and for now am just suppressing the diagnostic codes associated with the errors.

[johnnyreilly]

I didn't run the code, I spent 10 minutes or so reading the source and the config. It looks OK but as I say I haven't used JSX with ts-loader before; just TSX. I've a limited amount of time to look at issues - if you could spend some time on this I'd appreciate it. I can advise but probably not more.

That said: how are you trying to ignore the diagnostics - I don't see that anywhere?

[alecmerdler]

The issue seems to be with @types/react, removing it (and all packages that have it as a dependency) resolves the error, and ES6 components are imported with type any. I am still not seeing any effect by annotating the ES6 class with @augments {React.Component<any, any>}.