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

Question

我正在制作一个需要集成 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 ，开发人员遇到的问题与我的非常相似。找到的解决方案是

basically what i need it is just adding react-hook-form as externallibrary in webpack config and now, csb is working :)

我对 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 组件包装我的表单。出现错误是因为没有上下文可以为我的 useFormContext 提供 control，因此无法解构它。