React 中 Property does not exist on type ‘JSX.IntrinsicElements’ 错误

当组件的名称以小写字母开头时，会出现错误“Property does not exist on type ‘JSX.IntrinsicElements”。 要解决该错误，需要确保始终以大写字母开头组件名称，安装 React 类型并重新启动我们的开发服务器。

下面是错误发生方式的示例。

// 名称以小写字母开头
function myComponent() {
  return <h1>Hello world</h1>;
}

function App() {
  return (
    <div>
      {/* ⛔️ Property does not exist on type 'JSX.IntrinsicElements'. */}
      <myComponent />
    </div>
  );
}

export default App;

上面代码示例中的问题是 myComponent 以小写字母开头。

要解决此错误，需要确保所有组件名称都以大写字母开头。

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

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

export default App;

React 使用这种命名约定来区分内置元素，如 p、div、span 和我们定义的自定义组件。

如果错误未解决，重新启动 IDE 和开发服务器。

如果这没有帮助，请确保安装了 react 的类型。 在项目的根目录（package.json 文件所在的位置）中打开终端并运行以下命令。

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

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

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

如果错误未解决，请尝试删除 node_modules 和 package-lock.json（不是 package.json）文件，重新运行 npm install 并重新启动 IDE。

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

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

$ npm install

如果错误仍然存在，请确保重新启动你的 IDE 和开发服务器。 VSCode 经常出现故障，有时重启可以解决问题。

火焰兔

海报 链接