reactjs - 从内部组件库中使用 react-hook-form FormProvider 时不起作用

Question

我在我的 FormContext 组件中使用 react-hook-form FormProvider，如下所示：（这个组件在我的组件库中）

const FormContext: FunctionComponent<Props> = ({
  children,
  ...options
}) => {
  const formMethods = useForm(options);

  return (
    <FormProvider {...formMethods}>
      {children}
    </FormProvider>
  );
};

export default FormContext;

这是我的组件：（在 Content 组件中我使用 useFormContext 钩子）

<FormContext>
   <Content />
</FormContext>

当我运行我的应用程序时，出现此错误：

未捕获的类型错误：无法解构“（0，react_hook_form__WEBPACK_IMPORTED_MODULE_2__.useFormContext）（...）”的属性“重置”，因为它为空。

package.json 在我的内部组件库中：

{
  "devDependencies": {
    "react-hook-form": "6.9.6",
  },
  "peerDependencies": {
    "react-hook-form": ">=7.0.0",
  }
}

Answer 1

我想我刚刚解决了这个问题。我最终做的是将包的一些tsconfig.json设置与应用程序的设置相匹配。具体来说，我更改了以下内容以匹配两者：

...
"compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react-jsx",
...

我还没有戳到这个来查看哪些特定值修复了问题，但我感觉它可能是“lib”值。也许这会有所帮助？

[编辑] 另外值得注意的是，我恢复到 v7.21.0，但我不确定这是问题所在。我会尽快将其更新为当前版本，看看它是否仍然有效。[编辑 2] 看起来它仍在使用 v7.22.5。