升级Next.js到12版本后运行yarn dev出现react-hook-form报错如何解决

错误原因 #

Next.js 12 默认开启了 ES 模块导入严格校验，你当前使用的 react-hook-form 版本为 CommonJS 模块，不支持直接通过命名导出的方式引入 set 等方法。

修复方案 #

• 方案1（推荐）：升级 react-hook-form 到 7.x 及以上版本，该版本已经完整支持 ES 模块规范，升级后原有命名导入写法无需改动即可正常运行，升级命令：

  yarn add react-hook-form@latest
  

• 方案2（兼容旧版本）：如果项目依赖限制无法升级版本，可以修改导入写法，从默认导出中解构需要的方法：
  原错误写法示例：

  import { set, useForm } from 'react-hook-form'
  

  修改为：

  import RHF from 'react-hook-form'
  const { set, useForm } = RHF
  

• 方案3（临时兼容，不推荐）：在 next.config.js 中关闭 ES 模块外部依赖校验：

  module.exports = {
    experimental: {
      esmExternals: false
    }
  }
  

  该方案会影响依赖导入性能，仅作为临时调试使用。

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