无改动突发TS类型错误：JSX组件与类型兼容问题求助

1. Link、SortingTable等组件无法作为JSX使用 #

原因 #

• React、@types/react、@types/react-dom版本不匹配，导致类型定义冲突；
• TypeScript版本与React类型定义兼容性差；
• 项目中存在多个版本的@types/react依赖，引发类型混淆。

解决方法 #

• 统一React相关依赖版本：删除node_modules和package-lock.json/yarn.lock，在package.json中明确指定react、react-dom、@types/react、@types/react-dom为同一大版本（比如均为18.x），重新执行npm install/yarn install；
• 检查TypeScript版本：如果用TS 5.x，确保@types/react版本在18.2.0以上，若版本不兼容，要么升级类型包，要么降级TS到适配版本；
• 强制统一依赖版本：用npm ls @types/react或yarn list @types/react查看重复依赖，通过package.json的overrides（npm）或resolutions（yarn）字段强制锁定@types/react到指定版本。

2. 所有HTML标签提示'React'是UMD全局变量需添加导入 #

原因 #

• TS配置中JSX模式设置错误，未开启自动导入React的逻辑；
• 模块解析配置异常，导致TS无法识别JSX文件的React导入规则；
• 存在全局React声明文件，和项目局部导入冲突。

解决方法 #

• 调整jsx配置：React 17及以上版本，在tsconfig.json中设置"jsx": "react-jsx"，无需手动导入React即可使用JSX；旧版本设置为"jsx": "react"，并确保每个JSX文件顶部都有import React from 'react'；
• 优化模块解析：将tsconfig.json的module设为"ESNext"，moduleResolution设为"bundler"或"NodeNext"，保证模块解析逻辑正常；
• 删除全局声明：如果项目中有自定义的全局React声明文件（比如globals.d.ts里的declare module 'react'），直接删除，避免和官方类型定义冲突。

3. node_modules中feDisplacementMap属性重复声明 #

原因 #

• 多个SVG相关的类型依赖（如@types/svg、@types/react-svg）重复定义了SVG元素属性；
• @types/react和其他SVG类型包的属性定义重叠。

解决方法 #

• 清理重复依赖：用npm ls @types/svg排查冗余的SVG类型包，卸载不需要的；
• 限制类型导入：在tsconfig.json的compilerOptions中添加"types": ["react", "react-dom"]，只导入指定的类型包，避免自动加载冲突的类型定义；
• 临时跳过库检查：若紧急需要恢复开发，可设置"skipLibCheck": true跳过第三方库的类型检查，但这只是临时方案，优先解决依赖冲突。

tsconfig.json参考配置 #

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["react", "react-dom"]
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json参考配置 #

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

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