Repository navigation
TS2605 error when importing react class components from legacy jsx files. #14881
Description
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
Activity
mhegazy commentedon Mar 27, 2017
Should be fixed by #14832
alecmerdler commentedon Aug 29, 2017
I am still seeing this issue when using ES6
importsyntax in.tsxfiles to import components thatextend React.Componentin.jsxfiles, usingtypescript@2.5.1. I see variations oferror 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 commentedon Aug 29, 2017
Alec Merdler (@alecmerdler) i am unable to reproduce this locally. please log a new issue and give us some more context.
alecmerdler commentedon Aug 30, 2017
Okay, I have created a new issue and repo #18134.
benrudolph commentedon Mar 19, 2018
FWIW, I was also experiencing this issue with legacy JSX files. However changing this:
to:
fixed the issue. ¯_(ツ)_/¯