Next.js执行yarn build报错Modal无法作为JSX组件如何修复

该类型错误出现在生产构建的TS严格校验阶段，核心诱因有两个：

• next/dynamic 动态导入的默认类型推导结果存在冗余联合类型，包含ReactElement<any, any>、null等不属于合法JSX组件的类型，TS无法确认导入值为可渲染组件
• 项目内存在多版本@types/react依赖冲突，导致JSX元素合法性校验规则不一致

按优先级从高到低选择以下方案即可：

方案1：显式指定动态导入的组件泛型（推荐，无运行时影响） #

导入Modal组件对应的Props类型，给dynamic方法传入明确的组件类型泛型，修正TS的类型推导结果：

import type { ModalProps } from '@components/ui/Modal'
import dynamic from 'next/dynamic'

const Modal = dynamic<React.ComponentType<ModalProps>>(() => import('@components/ui/Modal'), {
  ...dynamicProps,
  ssr: false,
})

如果动态导入的是模块的default导出，也可以在导入promise中明确返回default组件，进一步收窄类型：

const Modal = dynamic<React.ComponentType<ModalProps>>(
  () => import('@components/ui/Modal').then(mod => mod.default),
  {
    ...dynamicProps,
    ssr: false,
  }
)

修改后无需改动其他业务代码，类型错误会直接消除。

方案2：修复@types/react多版本冲突 #

如果使用方案1后错误仍然存在，说明项目内存在多版本React类型定义冲突，先执行命令检查依赖版本：

yarn list @types/react

如果输出结果中存在多个不同版本的@types/react，在package.json中添加resolutions字段强制全局统一React类型版本（Yarn包管理器适用）：

{
  "resolutions": {
    "@types/react": "与项目内react版本匹配的类型版本号，例如18.2.0"
  }
}

保存后重新执行yarn install安装依赖，再执行yarn build即可正常构建。

方案3：紧急兜底方案（不推荐长期使用） #

如果需要快速通过构建，可以使用类型断言强制将动态导入结果标记为合法函数组件，该方案会丢失部分TS类型校验能力，仅适合紧急场景使用：

const Modal = dynamic(() => import('@components/ui/Modal'), {
  ...dynamicProps,
  ssr: false,
}) as React.FC<ModalProps>

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