React 17 + TypeScript 找不到react/jsx-runtime模块问题求助

原因分析 #

这个错误通常来自两个方面：

• 部分依赖（如你项目中的@hookform/resolvers@3.0.0）版本过高，与React 17、旧版react-hook-form不兼容，默认使用了React 18的JSX Runtime导入逻辑
• TypeScript配置或类型声明缺失，无法识别React 17环境下的react/jsx-runtime模块

解决方案 #

方案1：降级不兼容的依赖

你的项目中@hookform/resolvers@3.0.0是为react-hook-form v7+设计的，但你使用的是react-hook-form@6.15.8，版本不匹配导致了兼容性问题。执行以下命令降级到兼容版本：

npm install @hookform/resolvers@2.9.11
# 或使用yarn
yarn add @hookform/resolvers@2.9.11

方案2：添加自定义类型声明文件（如果降级依赖不可行）

如果无法调整依赖版本，可通过添加类型声明文件让TypeScript识别react/jsx-runtime模块：

1. 在项目src目录下创建types/react-jsx-runtime.d.ts文件
2. 写入以下内容：

declare module 'react/jsx-runtime' {
  import * as React from 'react';
  export default React;
  export const jsx: typeof React.createElement;
  export const jsxs: typeof React.createElement;
  export const jsxDEV: typeof React.createElement;
}

3. 确保tsconfig.json中include字段包含这个类型文件：

{
  "include": ["src/**/*", "src/types/**/*"]
}

方案3：调整TypeScript配置

检查tsconfig.json中的jsx编译选项，React 17环境下应设置为：

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

这个配置会启用React 17的新JSX转换，自动处理jsx-runtime的导入逻辑。

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