Unhelpful error with StatelessComponents

[alexjg]

TypeScript Version: 1.8.10

Code

File: src/App.tsx

/// <reference path="../typings/index.d.ts" />
import * as React from "react"
import Child from "./Child"

const App = () => {
    return (<div>
        <h1>Hello World</h1>
        <Child />
        <Child />
    </div>)
}

export default App

File: Child.tsx

/// <reference path="../typings/index.d.ts" />
import * as React from "react"

interface ChildProps {
    bold: boolean
}

const Child: React.StatelessComponent<ChildProps> = ({bold}) => {
    if (bold) {
        return <div style={{fontWeight: "700"}}>Child</div>
    }
    return <div>Child</div>
}

export default Child

File: tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "jsx": "preserve"
    }
}

Expected behavior:
An error free compile

Actual behavior:

/usr/local/lib/node_modules/typescript/lib/tsc.js:33078
                throw e;
                ^

TypeError: Cannot read property 'flags' of undefined
    at isRelatedTo (/usr/local/lib/node_modules/typescript/lib/tsc.js:16013:32)
    at checkTypeRelatedTo (/usr/local/lib/node_modules/typescript/lib/tsc.js:15941:26)
    at checkTypeAssignableTo (/usr/local/lib/node_modules/typescript/lib/tsc.js:15819:20)
    at isTypeAssignableTo (/usr/local/lib/node_modules/typescript/lib/tsc.js:15813:20)
    at getJsxElementAttributesType (/usr/local/lib/node_modules/typescript/lib/tsc.js:18463:47)
    at checkJsxOpeningLikeElement (/usr/local/lib/node_modules/typescript/lib/tsc.js:18564:40)
    at checkJsxSelfClosingElement (/usr/local/lib/node_modules/typescript/lib/tsc.js:18265:13)
    at checkJsxElement (/usr/local/lib/node_modules/typescript/lib/tsc.js:18281:25)
    at checkExpressionWorker (/usr/local/lib/node_modules/typescript/lib/tsc.js:20437:28)
    at checkExpression (/usr/local/lib/node_modules/typescript/lib/tsc.js:20349:42)

I imagine I'm doing something wrong here but I can't figure out what it is because the error message is a little obtuse.

There's a repo demoing the whole problem here: https://github.com/alexjg/typescript-error-demo

Thanks

[basarat]

"React.StatelessComponent" aren't you supposed to inherit from it? I didn't take a look now but that is what a gathered from my last read of the release notes 🌹

[alexjg]

Ah, maybe I've misunderstood the way it's mean to be used, I was going based on this blog post and the definition of the StatelessComponent, which looks like this:

interface StatelessComponent<P> {
    (props?: P, context?: any): ReactElement<any>;
    propTypes?: ValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: P;
    displayName?: string;
}

Which looks to me like it's a function which returns a ReactElement but has some extra properties right? I'm new to TypeScript so very likely to be reading it wrong.

[kitsonk]

Irrespective of the potential "misuse" you have encountered a tsc compiler error, which shouldn't happen, versus a legitimate TypeScript language error. I am sure the TypeScript team will be along soon to triage it and figure what is going wrong with the compiler.

[basarat]

My misunderstanding. The new thing I was thinking is a new "class" called React.PureComponent 🌹

[RyanCavanaugh]

Looks like a duplicate of #7286, which has been fixed in 2.0