Component cannot be used as a JSX component

今天在使用 React + Ts,使用 react-icons 这个库的时候,遇到了这个问题:

原因用一句话概括就是 Ts 的版本太低了!

我的 package.json:

json 复制代码
{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.126",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.5.0",
    "react-router-dom": "^6.30.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react": "^18.3.23",
    "@types/react-dom": "^18.3.7",
    "@types/react-router-dom": "^5.3.3"
  }
}

我把版本改为 "typescript": "^5.8.3" 就可以了。

相关推荐
FungLeo1 天前
成为全栈·React 管理后台篇·Markdown 编辑器:预览、暗色主题与连续图片粘贴
图片上传·react·响应式设计·markdown编辑器·异步编程·成为全栈
FungLeo2 天前
成为全栈·React 管理后台篇·表单页范式:校验、数据回填与未保存保护
react·表单设计·zod·react hook form·成为全栈·数据回填
名字还没想好☜2 天前
React 文件上传实战:预览 URL 回收、多文件逐个进度与拖拽放置区踩坑
前端·react·next.js
右耳朵猫AI2 天前
Web前端周刊2026W38 | React 19.3 发布、StyleX 深潜、jsdom 30.1 提速
前端·javascript·react.js·typescript·node.js
溪语流沙2 天前
Django + Vue电商项目第001讲:开篇|注册登录加增删改查,那不是电商
redis·python·mysql·docker·typescript·django·vue
FungLeo2 天前
成为全栈·React 管理后台篇·列表页范式:让分页、筛选和返回位置进入 URL
react·前端架构·分页查询·react router·成为全栈·url状态
掰头战士3 天前
多重影分身!恨不得把一个agent掰成两个? 还真能干!
typescript·llm·agent
FungLeo3 天前
成为全栈·React 管理后台篇·服务端状态、会话状态、界面状态:不要都塞进 Zustand
react·状态管理·zustand·react hook form·成为全栈·tanstack query
shmily麻瓜小菜鸡3 天前
TDD(测试驱动开发)详解
开发语言·javascript·typescript·node.js·ecmascript
FungLeo3 天前
成为全栈·React 管理后台篇·前端鉴权闭环:内存令牌、刷新旋转与路由守卫
react·路由守卫·zustand·刷新令牌·成为全栈·前端鉴权