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 #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 (@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 (@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>

[SamihIsHis]

For anyone else who might find this issue as a solution to custom tags in the future. In addition to Matt Haggard (@iffy) and Ryan Cavanaugh (@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...'