Typescript: TSX: Property does not exist on type 'JSX.IntrinsicElements'

[iffy]

TypeScript Version: 2.3.1

Code

import * as React from 'react';

declare namespace JSX {
    interface IntrinsicElements {
        'heyo': any
    }
}

let Something = React.createClass({
    render: function() {
        return (<div><heyo>foo</heyo></div>);
    }
})

Expected behavior:

I expect it to compile without error.

Actual behavior:

Running this command:

tsc --jsx react --module "amd" --target es2017 test.tsx 

I get this output:

test.tsx(11,22): error TS2339: Property 'heyo' does not exist on type 'JSX.IntrinsicElements'.
test.tsx(11,31): error TS2339: Property 'heyo' does not exist on type 'JSX.IntrinsicElements'.

I got the declare statement from https://github.com/Microsoft/TypeScript/issues/4648

[luca-moser]

TypeScript Version: 2.3.1

Same error here, my React components are suddenly all "wrong":

interface Props {
    ...
    scopes: any;
}

interface State {}

export class App extends React.Component<Props, State> {
    render() {
         return <Content {...this.props} />; // error
    }
}

interface Props {
    ...
    // without scopes in Props
}
export default class Content extends React.Component<Props, {}>{
    ...
}

error:

ERROR in ./spa/js/comps/App.tsx
(121,49): error TS2322: Type '{ ui?: UIState; session?: SessionState; scopes?: any; users?: any; roles?: any; plugins?: any; us...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Content> & Props & { children?: ReactNode; }'.
  Property 'scopes' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Content> & Props & { children?: ReactNode; }'.

[iffy]

@luca-moser what version of TypeScript was it last working on?

[iffy]

Okay, I found out how to fix this. Instead of putting the declare line in the .tsx file, I have two files:

// test.tsx
import * as React from 'react';

let Something = React.createClass({
    render: function() {
        return (<div><heyo>foo</heyo></div>);
    }
})

// test.d.ts
declare namespace JSX {
    interface IntrinsicElements {
        heyo: any
    }
}

The command: tsc --jsx react --module "amd" --target es2017 test.tsx test.d.ts succeeds.

[RyanCavanaugh]

You can also put that second block inside declare global { namespace JSX { ... ... ... } } instead of its own file

[kherock]

@luca-moser your issue isn't really the same. Yours is a bug in TS and will be fixed with #13288. In the meantime you should stay on 2.2.

[stereobooster]

I get

Property 'nobr' does not exist on type 'JSX.IntrinsicElements'

Not sure where to report this. Solution

<span style={{ whiteSpace: "nowrap" }}></span>

[TheAfterman]

For anyone else who might find this issue as a solution to custom tags in the future. In addition to @iffy and @RyanCavanaugh global namespace solution, you can declare your custom element type like this:

import * as React from 'react';
declare global {
    namespace JSX {
        interface IntrinsicElements {
            'my-html-custom-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
        }
    }
}

In order to get better type/property checking and code completion on your custom tags

[ackvf]

@TheAfterman Can you help me modify your solution to work with components such as <Button/> from the antd library? (https://ant.design/components/button/#API) It says that

<Button>Hello world!</Button> will be rendered into <button><span>Hello world!</span></button>, and all the properties which are not listed above will be transferred to the <button> tag.

but the typings don't support additional tags for this component so I get this error Property 'title' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<{ children?: ReactNode; }> & Re...'