如何在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形式的空上下文，开发人员遇到的问题与我的问题非常相似。找到的解决方案是

基本上我需要的只是添加react-hook形式作为外部现在，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提供给我的useFormContext，所以没有办法取消它的结构。