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

Question

我正在制作一个表单，需要将react-dropzone与react-hook-form集成，为此，我基于Github上的讨论： https: //github.com/react-hook-form/react-钩子形式/讨论/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，开发人员遇到的问题与我的非常相似。找到的解决方案是

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

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

/next.config.js

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

    return config;
  },
  ...
}

但错误仍然是一样的。你知道我该如何解决这个问题吗？

Answer 1

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