如何在 webpack 中添加 react-hook-form 作为外部库？答案

【问题标题】：How to add react-hook-form as an external library in webpack?如何在 webpack 中添加 react-hook-form 作为外部库？
【发布时间】：2021-10-26 14:02:15
【问题描述】：

我正在制作一个表格，我需要将react-dropzone 与react-hook-form 整合在一起，为此，我将自己基于Github 上的讨论：https://github.com/react-hook-form/react-hook-form/discussions/2146。但是在解构useFormContext的时候，如下：

const { control } = useFormContext();

我收到以下错误：

TypeError: Cannot destructure property 'control' of 
'(0 , react_hook_form__WEBPACK_IMPORTED_MODULE_2__.useFormContext)(...)' as it is null.

我做了一些研究，发现了这个问题：react-hook-form empty context，开发人员遇到的问题与我的非常相似。找到的解决方案是

基本上我需要的只是将 react-hook-form 添加为外部 webpack 配置中的库，现在 csb 正在工作:)

我对 webpack 知之甚少，尤其是 Nextjs 内部。但是在研究和阅读文档之后，这是我的尝试：

/next.config.js

module.exports = {
  webpack: (config, options) => {
    config.externals.push({
      'react-hook-form': 'react-hook-form',
    });

    return config;
  },
  ...
}

但错误仍然相同。你知道我该如何解决这个问题吗？

【问题讨论】：

您是否使用FormProvider 组件包装您的表单？见useFormContext docs。
@juliomalves 你说得对，我忘了包装我的表格！我这两天一直有这个问题，现在已经解决了...谢谢！

标签： reactjs webpack next.js react-hook-form

【解决方案1】：

感谢@juliomalves 的评论，我解决了这个问题。问题是我忘记用FormProvider 组件包装我的表单。给出错误是因为没有上下文可以将control 提供给我的useFormContext，因此无法解构它。

【讨论】：