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

Oldtime

try <Item /> use this with pascal case. Its case sensitive – Gilgilba

@RM-123 No, it can be item. item with lowercase is a valid HTML element name. Custom Elements can all be lowercase elements just like the intrinsic ones. – Legality

@Legality No, it can't be item. Custom elements must contain - a hyphen. link – Figurehead

@Figurehead Doh, I knew that. I think I meant that it is valid to write arbitrary element names in the DOM. You can write <blahblah> and it will be there. But there's no way to register a <blahblah> element. – Legality

@Legality No, it is not valid to write arbitrary element names in lowercase (without the hyphen) even though it will probably compile and work. – Figurehead

It'd be nice if it were, because it is valid HTML. – Legality

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 />)
    }
}

Gilgilba

To be clear to future face-palmers, the trick is the capital letter I in Item. We're all here having the same lapse in judgement here trying to camelCase a react element. Chances are if you're reading this you're sleep deprived enough to miss that capital letter too. – Stroman

Just as reference: this also applies to Functional Components. Function name should be capitalized as well. – Amaranthaceous

here i am again a month later (face palm) – Unreconstructed

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>;
    }
  }
}

Beltz

Great answer. Just to add in case it's not obvious, if your custom component is named like "my-item" then the syntax is ['my-item']: React.DetailedHTMLProps... – Doublejointed

For Next.js add it to a file filename.d.ts and don't forget to include it in tsconfig.json "include": [... "filename.d.ts"], – Aribold

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.

Rhombohedral

That's a very stupid typescript rule. But anyways. – Ctn

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 .

Romaromagna

I concur, vscode does rename the type definition when one use the refactoring feature on a component, e.g. <button> → <a> – Glasswork

Said in another way, you pressed F2 on a tag to change it to something else and you literally renamed in in the type definitions. npm uninstall @types/react and npm install --save-dev @types/react did it for me. – Wurtz

I guess it can happen that way too, i think i did find/replace – Romaromagna

In addition to downloading a fresh copy of node_modules, you may need to restart VS Code for the errors to go away. – Pussy

Answer 5

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"
    }
...

Chloride

Didn't help in our case. – Bevus

this worked for me! i had it set to "node10" previously (the typescript default iirc), but this fixed it – Hest

Answer 6

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

Mystical

I checked mine as we also have a "long-string" kind of prop and it didn't work for me, even after setting it to any, but for me any prop on interface IntrinisicElements { breaks. – Bevus

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!

Highkeyed

Answer 8

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!

Palpate

Answer 9

VS Code View -> command palette, run the TypeScript: Select TypeScript version command and select Use Workspace version

or

VS Code View -> command palette, run the TypeScript: Select TypeScript version command and select Use VS code's version

Ella

Answer 10

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)

Calceolaria

Answer 11

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

Saxena

This is effectively the same as what the accepted answer said. – Bonner

Doesn't make a difference on my project. – Bevus

Answer 12

You just need to update Visual Studio and everything will work.

CHECK HOW TO UPDATE

Scotch

what you're showing in that screenshot is not visual studio – Segura

Answer 13

For those encountering it via VSCode:

It might sound silly, but have you tried closing out of VSCode and then reopening the project? Or deleting node_modules, installing them again, and then reopening VSCode?

I've encountered this problem where it appears stuck in said error state, but one of these usually clears it. Perhaps there's a more thoughtful approach, but the ole IT fix works often enough.

Coulisse

Answer 14

I had the same issue with the h1 tag. The problem started after removing default import statements.

Below commands fixed the issue.

rm node_modules

and

npm install

Broadcloth

Answer 15

change the "moduleResolution": "Node" in tsconfig.json

Lillianalillie

Answer 16

Sometimes this error comes up for an entirely different reason. For example I had a component defined as follows:

export type GaleryItem = {
  src: string;
  caption: string;
}

export default function GalleryDisplay({data}:{data:GaleryItem[]}) {
 ...
}

I was calling it like this:

var items: GalleryItem[];
// Assign items here

return (... <GaleryDisplay data={items}/> ...)

At any rate I got the error Property 'data' does not exist on type "IntrinsicAttributes". Turns out all it was was a missing import. After adding

import {GalleryItem, GalleryDisplay} from "my/components/gallerydisplay"

The issue was resolved. Sometimes the simplest solutions are the best. And sometimes the errors react throws out are quite misleading.

Clemenceau

Answer 17

In my case restarting Visual Studio Code solved the issue.

Lowell

Answer 18

I updated the IDE (VS Code). Then the error is gone.`

• sudo apt update
• sudo apt upgrade code
• code --version (to check the version)

`

Backing

Answer 19

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

Solicitude

Answer 20

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

Exultation

The accepted answer said the same six years ago. This adds nothing new. – Syllabism