JIYIK CN >

When the name of a component starts with a lowercase letter, we’ll get the error “Property does not exist on type 'JSX.IntrinsicElements”. To fix this error, we’ll make sure to always start our component names with an uppercase letter, install React typings, and restart our development server.

The following is an example of how the error occurs.

// 名称以小写字母开头
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 in the code example above is that myComponent starts with a lowercase letter.

To resolve this error, you need to make sure all component names start with an uppercase letter.

function MyComponent() {
  return <h1>Hello world</h1>;
}

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;

React uses this naming convention to distinguish between built-in elements such as p, div, spanand custom components that we define.

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

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

# 使用 NPM
$ npm install --save-dev @types/react @types/react-dom

# ----------------------------------------------

# 使用 YARN
$ yarn add @types/react @types/react-dom --dev

If the error is not resolved, try deleting node_modulesthe and package-lock.json (not package.json) files, re-running npm installand restarting the IDE.

# 👇️ 删除 node_modules 和 package-lock.json
$ rm -rf node_modules
$ rm -f package-lock.json

# 👇️ 清除 npm 缓存
$ npm cache clean --force

$ npm install

If the error persists, make sure to restart your IDE and development server. VSCode often glitches and sometimes restarting can fix the problem.