Property does not exist on type 'JSX.IntrinsicElements'

avatar

Borislav Hadzhiev

Last updated: Apr 6, 2022

banner

Photo from Unsplash

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

The error "Property does not exist on type 'JSX.IntrinsicElements'" occurs when a component's name starts with a lowercase letter. To solve the error, make sure to always start component names with a capital letter, install the types for React and restart your dev server.

property does not exist on type jsx intrinsicelements

Here is an example of how the error occurs.

App.tsx
// 👇️ name starts with lowercase letter function myComponent() { return <h1>Hello world</h1>; } function App() { return ( <div> {/* ⛔️ Property does not exist on type 'JSX.IntrinsicElements'. */} <myComponent /> </div> ); } export default App;

The issue in the code sample above is that myComponent starts with a lowercase letter.

To solve the error, make sure that all component names start with an uppercase letter.

App.tsx
function MyComponent() { return <h1>Hello world</h1>; } function App() { return ( <div> <MyComponent /> </div> ); } export default App;

React uses this naming convention to differentiate between built-in elements like p, div, span and custom components we define.

If the error is not resolved, restart your IDE and development server.

If that didn't help, make sure you have the typings for react installed. Open your terminal in the root directory of your project (where your package.json file is) and run the following command.

shell
# 👇️ with NPM npm install --save-dev @types/react @types/react-dom # ---------------------------------------------- # 👇️ with YARN yarn add @types/react @types/react-dom --dev

If the error is not resolved, try to delete your node_modules and package-lock.json (not package.json) files, re-run npm install and restart your IDE.

shell
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json # 👇️ clean npm cache npm cache clean --force npm install

Make sure to restart your IDE and dev server if the error persists. VSCode often glitches and a reboot solves things sometimes.

Conclusion #

The error "Property does not exist on type 'JSX.IntrinsicElements'" occurs when a component's name starts with a lowercase letter. To solve the error, make sure to always start component names with a capital letter, install the types for React and restart your dev server.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.