Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?

Question

I am using typescript to write redux application.

var item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

export default class ItemList extends Component<any, any> {
    render() {
        return (<item />)
    }
}

Then typescript complains this:

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

Answer 1

Your component must start with a capital letter I instead of small letter i otherwise TypeScript would yell. Changing item to Item should fix it:

var Item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

export default class ItemList extends Component<any, any> {
    render() {
        return (<Item />)
    }
}

Answer 2

You can declare your custom element type like this:

import * as React from 'react'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      item: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}

Answer 3

That is because your item component's name does not start with a capital letter, causing Typescript to complain. Replacing item with Item could solve this problem.

Answer 4

For anyone else stuck on this.

The solutions was to

rm -rf node_modules
npm install

Typescript complained

Property 'div' does not exist on type 'StyledInterface'.

and

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

I think the root cause was vscode (me) accidentally editing type definitions in node_modules .

Answer 5

It looked like I had the same problem as in this question, but it was typo :/ But I've decided to share that here since error looked very similar and google led me here.

I had typo in declaration:

declare global {
    namespace JSX {
        interface IntrinisicElements {
            'about-me': { me: string }
        }
    }
}

Instead of IntrinsicElements I had IntrinisicElements (extra 'i' letter after 'Intrin'). The compiler didn't complain that because it is definition of interface, so the name can be of our choice.

And the error was like that:

Property 'about-me' does not exist on type 'JSX.IntrinsicElements'.

Answer 6

Remember: "item" is not valid in TypeScript, you must declare as "Item", UpperCase the first letter! It is will be like:

var Item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

Good day!

Answer 7

This could happen if you just renamed a tag by pressing F2 on it in VSCode, which could change the typing of the tag.

When the rename happened, some index.d.ts file should be opened in a new tab. So, look to see if this tab is still open. The path might be something like .../node_modules/@types/react/index.d.ts.

If you find the tab, go into it, then press ctrl-z to undo.

If you don't see this tab, you may have already closed it. Try to use your hotkey to reopen recently opened tabs, keep doing it until you find the file, then ctrl-z. (VSCode maintains the change history for undo, even after you close the file)

If you don't know the hotkey, use command palette View: Reopen Closed Editor, which will also show the hotkey on the side.

Answer 8

I used PascalCase in writing the name of component then the error disappear