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

Question

I want to use material-ui in typescript.

/// <reference path="../../../typings/react/react.d.ts"/>
import React = __React;
import * as FlatButton from "material-ui/lib/flat-button";

interface ATCProps{
    clickHandler:__React.MouseEventHandler;
}

export default class AddToCartBtn extends React.Component<ATCProps,any>{
    render(){
        return (
            <FlatButton></FlatButton>  // -> error
        )
    }
}

flat-button.d.ts

declare module "material-ui/lib/flat-button" {
    import ReactElement = __React.ReactElement;
    import Component = __React.Component;
    interface FlatButton extends __React.Component<any,any>{
    }
    export default FlatButton;
}

Error:(15, 14) TS2604: JSX element type 'FlatButton' does not have any construct or call signatures.

Answer 1

You need to replace interface FlatButton with class FlatButton. The module definition you've exported doesn't have any value associated with it.