current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 3 down vote favorite

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"
    }
}
share|improve this question
up vote 3 down vote accepted

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';
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.