164

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'.
6
  • 23
    try <Item /> use this with pascal case. Its case sensitive Commented May 24, 2016 at 12:58
  • @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.
    – trusktr
    Commented Feb 17, 2017 at 2:07
  • 3
    @trusktr No, it can't be item. Custom elements must contain - a hyphen. link
    – Qwerty
    Commented Jul 17, 2018 at 8:23
  • @Qwerty 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.
    – trusktr
    Commented Aug 6, 2018 at 4:37
  • 2
    @trusktr No, it is not valid to write arbitrary element names in lowercase (without the hyphen) even though it will probably compile and work.
    – Qwerty
    Commented Aug 6, 2018 at 13:29

21 Answers 21

329

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 />)
    }
}
3
  • 104
    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. Commented Feb 22, 2017 at 19:52
  • 1
    Just as reference: this also applies to Functional Components. Function name should be capitalized as well. Commented Jan 14, 2022 at 18:48
  • 2
    here i am again a month later (face palm)
    – JesseBoyd
    Commented Mar 8, 2023 at 1:05
70

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>;
    }
  }
}
2
  • 4
    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...
    – caprica
    Commented Nov 13, 2022 at 13:52
  • 1
    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"], Commented Nov 15, 2022 at 22:54
41

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.

2
  • That's a very stupid typescript rule. But anyways.
    – Vinny
    Commented Apr 8 at 10:02
  • Thanks a lot for this answer. I was struggling with this typescript rule.. Commented Jul 3 at 12:13
33

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 .

4
  • 8
    I concur, vscode does rename the type definition when one use the refactoring feature on a component, e.g. <button><a> Commented May 4, 2021 at 13:01
  • 3
    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.
    – antirealm
    Commented Aug 11, 2022 at 9:20
  • I guess it can happen that way too, i think i did find/replace
    – Jkarttunen
    Commented Aug 21, 2022 at 9:26
  • In addition to downloading a fresh copy of node_modules, you may need to restart VS Code for the errors to go away.
    – esinator
    Commented May 31, 2023 at 19:47
19

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"
    }
...
2
  • Didn't help in our case.
    – kahlan88
    Commented Dec 6, 2023 at 15:18
  • this worked for me! i had it set to "node10" previously (the typescript default iirc), but this fixed it
    – Merlin04
    Commented Jan 4 at 19:08
11

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

1
  • 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.
    – kahlan88
    Commented Dec 6, 2023 at 15:13
11

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

0
8

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!

0
7

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!

4

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)

2

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

2
  • This is effectively the same as what the accepted answer said. Commented Jul 29, 2023 at 12:45
  • Doesn't make a difference on my project.
    – kahlan88
    Commented Dec 6, 2023 at 15:19
2

If this happened in VS Code: Try command + shift + P and the command TypeScript: Restart TS Server

This worked for me.

1

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

1

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

CHECK HOW TO UPDATE

1
  • 1
    what you're showing in that screenshot is not visual studio
    – starball
    Commented Feb 7 at 5:20
0

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.

0

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
0

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.

0

In my case restarting Visual Studio Code solved the issue.

0

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

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

`

-1

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

-4

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

1
  • The accepted answer said the same six years ago. This adds nothing new. Commented Oct 15, 2022 at 3:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.