CODEWITHSUNDEEP
javascriptreactjstypescript
Knack
Knack

Reputation: 1134

React: Using ES6 component in TS component: TS2605: JSX element type 'xxx' is not a constructor function for JSX elements

I want to use an ES6 React component in another Typescript component.

The ES6 component:

class ModelViewer extends Component {
  constructor(props, context) {
    super(props, context);
    //...
  }
// ...
}
export default ModelViewer;

My consuming TS component:

import * as ReactDOM from "react-dom";
import * as React from "react";
import ModelViewer from "./model_viewer/ModelViewer";

export class Viewer extends React.Component<any, any> {
    render() {
        return (
                <div>
                    <ModelViewer />
                </div>
        );
    }
}

Options for the TSC are:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "removeComments": true,
        "sourceMap": true,
        "allowJs": true,
        "watch": true,
        "outDir": "./dist/",
        "jsx": "react",
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true
    }
}

Now I'm receiving the error TS2605: JSX element type 'ModelViewer' is not a constructor function for JSX elements.

Do I need to provide typings despite having set "allowJS": true? I've tried different ways to import, but no difference.

Upvotes: 4

Views: 4398

Answers (1)

Knack
Knack

Reputation: 1134

As a kind of brute force method I satisfied the Typescript compiler using a custom typings file.

// typings/custom.d.ts
declare module "*";

And tell the compiler in my tsconfig.json to read my custom typings:

// tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "removeComments": true,
        "sourceMap": true,
        "allowJs": true,
        "watch": true,
        "outDir": "./dist/",
        "jsx": "react",
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "typeRoots": [
             "./typings",
             "node_modules/@types"
         ]
    }
}

Upvotes: 3

Related Questions