Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
iffy opened this Issue Apr 28, 2017 · 8 comments

Comments

Projects
None yet
7 participants
@iffy
Copy link

iffy commented Apr 28, 2017

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

This comment has been minimized.

Copy link

luca-moser commented Apr 28, 2017

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

This comment has been minimized.

Copy link
Author

iffy commented Apr 28, 2017

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

@iffy

This comment has been minimized.

Copy link
Author

iffy commented Apr 28, 2017

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.

@iffy iffy closed this Apr 28, 2017

@RyanCavanaugh

This comment has been minimized.

Copy link
Member

RyanCavanaugh commented Apr 28, 2017

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

@kherock

This comment has been minimized.

Copy link

kherock commented May 1, 2017

@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

This comment has been minimized.

Copy link

stereobooster commented Feb 20, 2018

I get

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

Not sure where to report this. Solution

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

This comment has been minimized.

Copy link

TheAfterman commented May 2, 2018

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

This comment has been minimized.

Copy link

ackvf commented May 4, 2018

@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...'

@Microsoft Microsoft locked and limited conversation to collaborators Jul 31, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.