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
Closed

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

iffy opened this issue Apr 28, 2017 · 8 comments
Labels

Comments

@iffy
Copy link

@iffy 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
Copy link

@luca-moser 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
Copy link
Author

@iffy iffy commented Apr 28, 2017

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

@iffy
Copy link
Author

@iffy 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
Copy link
Member

@RyanCavanaugh RyanCavanaugh commented Apr 28, 2017

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

@kherock
Copy link

@kherock 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
Copy link

@stereobooster 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
Copy link

@TheAfterman 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
Copy link

@ackvf 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.
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants