React error Property does not exist on type 'JSX.IntrinsicElements'

The text starts here~

Overview

"Property does not exist on type 'JSX.IntrinsicElements'" error is caused when the component name starts with a lowercase letter. To fix this error, make sure the component name always starts with an uppercase letter, install the React declaration file and restart your development server.

Here is an example to show 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 problem with the above snippet is that myComponent starts with a lowercase letter.

Component capitalization

To resolve this issue, 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 distinguish built-in elements like p , div , span and custom components we define.

If the error is still not resolved, try restarting the IDE and development server.

type declaration

If that doesn't help, make sure the type declaration file for react is installed. Open a terminal in the root directory of the project and run the following command:

 # 👇️ 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 still not resolved, try deleting node_modules and package-lock.json (not package.json ) files, re-run npm install and 1f395577 IDE.

 # 👇️ 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

If the error persists, make sure to restart your IDE and development server. VSCode crashes frequently, and restarting sometimes solves some issues.

Summarize

The reason for the problem is that custom components don't start with a capital letter, because that's how React differentiates built-in elements from custom components.