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

For anyone else who has run into this and the previous answers did not work, this can also happen in a .tsx file due to a misconfiguration of your tsconfig.json file.

I had the error with:

...
"compilerOptions": {
   "jsx": "react-jsx"
}
...

And solved it by changing it to just:

...
"compilerOptions": {
   "jsx": "react"
}
...

Again, the above answers are probably the first thing to check, but if you're getting these errors on standard HTML elements like div, span, etc and you're using Typescript. Check your tsconfig.json!

Answer 8

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 have opened in a new tab. Check if the 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 (cmd-z) to undo your change.

If you don't see the tab, you probably have closed it. Try to use your hotkey to reopen recently closed tabs. If you don't know the hotkey, use command palette View: Reopen Closed Editor. Keep doing it until you find the file, then undo your change. (VSCode remembers the change history for undo, even after you close the tab)

Answer 9

For all those who faced similar error:

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

Or any other tag instead of div. If other solutions didn't help, try adding to tsconfig.json:

...    
"compilerOptions": {
    "moduleResolution": "node"
    }
...

Answer 10

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

Answer 11

Your issue is specifically related to the item's first letter being small.

Problem:

But for those people who are facing this issue due to Creating the React project using Vite instead of CRA, then let me tell to those that Vite has issue with react-ts template and throwing errors in even ts.config.json files

Solution:

So if you want to have react-ts template then please use CRA for that instead of Vite, otherwise for simple react app creation Vite is best.

Thanks

Answer 12

you just edit the name component to capitalize,
for ex:
before: export default function jobAndIncome() {};
after: export default function JobAndIncome() {};