Mantine/core v5.9.5组件JSX提示异常但项目可运行求助

环境信息 #

• 系统：2022 MacBookPro，MacOS 13.4，Apple M2芯片
• Node.js：v16.14.0
• npm：v8.3.1
• yarn：v1.22.17

问题详情 #

使用Mantine/core v5.9.5开发时，IDE提示组件无法作为JSX组件使用，但实际组件能正常渲染，项目也可正常启动运行。

代码示例 #

import React from 'react'
import { Box } from '@mantine/core'
import Deal from './Deal'
import History from './History'

const H5Gird = () => {
  return <Box>test</Box>
}

export default H5Gird

错误提示说明 #

IDE报错提示组件不符合JSX组件类型定义（原截图显示该类型错误）

解决方法 #

1. 重新安装匹配版本的Mantine核心包
   可能是类型定义文件损坏或版本不匹配，执行以下命令重装：

   # yarn
   yarn remove @mantine/core && yarn add @mantine/core@5.9.5
   # npm
   npm uninstall @mantine/core && npm install @mantine/core@5.9.5
   

   若问题依旧，确保@types/react和@types/react-dom版本与项目React版本兼容，比如安装适配React 18的类型包：

   yarn add @types/react@^18.0.0 @types/react-dom@^18.0.0 --dev
   

2. 重启IDE的TypeScript服务
   这是IDE缓存导致误报的常见解决方式：

   • VS Code：按下Cmd+Shift+P（Mac）/Ctrl+Shift+P（Windows），执行TypeScript: Restart TS Server，之后重启IDE。

3. 修正tsconfig.json的JSX配置
   确保compilerOptions中的jsx字段设置正确，React 17及以上版本推荐使用react-jsx：

   {
     "compilerOptions": {
       "jsx": "react-jsx"
     }
   }
   

4. 清理依赖冲突
   检查是否存在多个版本的@mantine/core，执行命令查看：

   yarn list @mantine/core
   # 或 npm ls @mantine/core
   

   若有重复版本，执行去重命令：

   yarn dedupe @mantine/core
   # npm用户执行 npm dedupe
   

内容的提问来源于stack exchange，提问作者mlxgleesin