Question

我有一个包含多个Webpack模块的项目。在我的子模块中，我想创建一个自定义的React挂钩，可以在父模块的React组件中使用它。

我的示例钩子非常简单：

export function useTitle(title: string): void {
    useEffect(() => {
        document.title = title
    }, [title]);
}

但是，当在模块外部的React组件中使用自定义钩子时，出现错误：

错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：

您可能使用了不匹配的React和渲染器版本（例如React DOM）

您可能正在违反挂钩规则

您可能在同一应用中拥有多个React副本

我认为原因是为每个Webpack模块创建了一个React实例。一项Jest测试将子模块的React实例与父模块之一进行比较，也显示了这一点。

import {react} from "child-module";

test("react instance", () => {
    expect(react).toBe(React); // serializes to the same string, but unequal
});

无论如何，是否可以使用另一个Webpack模块中的自定义React钩子而不会出错？

我已经尝试过但没有成功

在我的Webpack配置文件中，我为React设置了外部声明，以避免将React包含在输出Webpack包中。
在子模块的package.json中，我已将React声明为对等依赖项。
在父模块的package.json中，我已链接到子模块"react": "../child-module/node_modules/react"的React安装，以确保两个模块使用相同的React副本。
< / li>
在运行时，我可以通过CDN而不是任何Webpack模块交付React。但是，如果我不能测试我的React组件，那对我没有多大帮助。

Answer 1

我最终可以通过将React存储在子模块和父模块的公共根文件夹的node_modules文件夹中来解决问题。

我的项目结构：

project
|
+--- node_modules     <-- React is here
|
+--+ child-module
|  |
|  +--- node_modules  <-- Does NOT contain React
|
+--+ parent-module
   |
   +--- node_modules  <-- Does NOT contain React

在多模块项目中使用自定义React Hook进行Jest测试时出错

1 个答案: