Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?
ReactjsTypescriptReduxReactjs Problem Overview
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'.
Reactjs Solutions
Solution 1 - Reactjs
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 />)
}
}
Solution 2 - Reactjs
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>;
}
}
}
Solution 3 - Reactjs
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.
Solution 4 - Reactjs
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 .
Solution 5 - Reactjs
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'.
Solution 6 - Reactjs
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!
Solution 7 - Reactjs
I used PascalCase in writing the name of component then the error disappear
Solution 8 - Reactjs
This could happen if you just renamed a tag pressing F2 on it in VSCode, which could change the typing of the tag.
As soon as this happens, look if you have any tab open that is the file index.d.ts
. 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 to find it. If you don't know the hotkey, use command palette View: Reopen Closed Editor
.