Next13中使用Formik ErrorMessage遇TypeScript组件报错求助

这个错误本质是Formik的类型定义和Next.js 13依赖的React 18类型不兼容导致的，按以下步骤排查修复：

• 升级Formik到最新稳定版
  Formik旧版本的类型定义未适配React 18的JSX类型，执行命令升级：

  npm install formik@latest
  # 或者用yarn
  yarn add formik@latest
  

• 同步更新@types/formik类型包
  确保类型定义包和Formik主包版本匹配，按需执行：

  # 未安装类型包时执行
  npm install @types/formik --save-dev
  # 已安装则更新版本
  npm update @types/formik
  

• 对齐React类型版本
  Next.js 13默认使用React 18，需确保@types/react和@types/react-dom也是对应版本：

  npm install @types/react@latest @types/react-dom@latest --save-dev
  

• 清理缓存并重启服务
  TypeScript缓存可能导致类型解析异常，执行以下操作：

  • 删除项目根目录的tsconfig.tsbuildinfo文件
  • 删除.next文件夹（Next.js缓存目录）
  • 重启开发者服务器

• 调整tsconfig.json的JSX配置
  若使用Next.js 13的App Router，确保tsconfig.json中compilerOptions.jsx设置为react-jsx：

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

纯React栈无问题是因为其依赖的React版本或类型定义和Formik兼容性更好，Next.js 13的默认依赖版本类型校验更严格，按上述流程即可解决类型不兼容问题。

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