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

Activity

1. luca-moser commented on Apr 28, 2017

   

   Luca Moser (luca-moser)

   on Apr 28, 2017

   More actions

   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; }'.
   
2. iffy commented on Apr 28, 2017

   

   Matt Haggard (iffy)

   on Apr 28, 2017

   Author

   More actions

   Luca Moser (@luca-moser) what version of TypeScript was it last working on?
3. iffy commented on Apr 28, 2017

   

   Matt Haggard (iffy)

   on Apr 28, 2017

   Author

   More actions

   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.

   ❤️React with ❤️1Reacted by mjaracz
4. Matt Haggard (iffy)

   closed this as completedon Apr 28, 2017
5. RyanCavanaugh commented on Apr 28, 2017

   

   Ryan Cavanaugh (RyanCavanaugh)

   on Apr 28, 2017

   Member

   More actions

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

   👍React with 👍7Reacted by Matt Haggard, Pablo Riedemann, Amin Roosta, Scott Vachalek, Elena García, DecadeMoon and Chemexus
6. Ryan Cavanaugh (RyanCavanaugh)

   added

   QuestionAn issue which isn't directly actionable in codeAn issue which isn't directly actionable in code

   on Apr 28, 2017
7. kherock commented on May 1, 2017

   

   Kyle Herock (kherock)

   on May 1, 2017

   More actions

   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.

   👍React with 👍1Reacted by Marcin Walas
8. stereobooster commented on Feb 20, 2018

   

   stereobooster

   on Feb 20, 2018

   Last edited by stereobooster

   More actions

   I get

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

   Not sure where to report this. Solution

   <span style={{ whiteSpace: "nowrap" }}></span>
   
9. SamihIsHis commented on May 2, 2018

   

   Sam Munshi (SamihIsHis)

   on May 2, 2018

   Last edited by SamihIsHis

   More actions

   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

   👍React with 👍4Reacted by Matt Haggard, Nathaniel H, Robbert Halff and elpik
10. ackvf commented on May 4, 2018

    

    Qwerty (Vítězslav Ackermann Ferko) (ackvf)

    on May 4, 2018

    Last edited by ackvf

    More actions

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

    locked and limited conversation to collaborators on Jul 31, 2018