Cannot import React JSX from separate file while using Typescript

Question

The issue is similar to How to properly import React JSX from separate file in Typescript 1.6.

It works fine when all the code is in a single file. But when I put the component to a different file and try to import, typescript compiler gives error.

The code looks fine.

Error I get is

JSX element type 'Hello' does not have any construct or call signatures.

app.tsx

/// <reference path="typings/tsd.d.ts" />
import React = require('react');
import ReactDOM = require('react-dom');
import $ = require('jquery');
import Hello = require('./components/Hello');

$(()=>{
    ReactDOM.render(<Hello name="Tom" />,document.body);
});

components/Hello.tsx

/// <reference path="../typings/tsd.d.ts" />
import React = require('react');

export default class Hello extends React.Component<any,any>{
    render(){
        return <div className="hello">Hello {this.props.name} !</div>;
    }
}

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "jsx": "react"
    }
}

Ryan Cavanaugh · Accepted Answer · 2016-02-22 19:00:51Z

4

If you wrote these lines

export default class Hello ...
/* and */    
import Hello = require('./components/Hello');

Then you need to write this to consume it:

<Hello.Hello name="Tom" />

You could instead write this, to change the module to export the class as its top-level object:

class Hello ...
export = Hello

or you could import the Hello export from the module with a destructuring:

import { Hello } from './components/Hello';

or you could import the default export from the module:

import Hello from './components/Hello';

answered Feb 22, 2016 at 19:00

Ryan Cavanaugh

223k59 gold badges280 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot import React JSX from separate file while using Typescript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related