使库块与 webpack 共享相同的反应上下文

Question

我有两个项目，一个是 react 应用，另一个是那个 react 应用使用的库。

该库与webpack捆绑，输出三个chunk，一个叫contexts，一个叫hooks，一个叫components

在上下文中可以找到“myContext”反应上下文（myLib/src/contexts/myContext.js）

在 hooks 中可以找到 "useMyContext" react hook (myLib/src/hooks/useMyContext.js)

并且在组件中可以找到“MyProvider”组件（myLib/src/components/MyProvider.jsx）

MyProvider 组件渲染 myContext.Provider，将 useMyContext 的输出作为值提供给它。

现在在我的 react 应用程序中，我渲染了一个组件“MyComponent”，其中包含从我的库中导入的“MyProvider”。

“MyComponent”使用从我的库中导入的 myContext，并呈现它的值。

我希望“MyComponent”呈现“useMyContext”钩子返回的值，因为它是在“MyProvider”中实现的

但是，“MyComponent”会渲染 myContext 中定义的初始值。

请注意，如果我将 myContext 和 MyProvider 导出到同一个块中，那么它会按预期工作，但在我的实际用例中我无法采用该解决方案。

这让我觉得从 contexts 块导出的 myContext 与用于 MyProvider 的 myContext 不同。

我在 package.json 中将 React 设为 peerDependency，以确保库依赖于应用程序中的 React 版本，出于同样的原因，我在 Webpack 配置中将其设为外部。

到目前为止，我尝试的是使用 Webpack 功能“dependOn”，以便在多个块之间共享反应。但是当我尝试这样做时，应用程序会在运行时引发错误“__webpack_require__ is not a function”。

你可以在这里找到存储库https://github.com/c0ll1d3r/ReactContextLibraryIssue

我是否在使用dependOn 的正确轨道上？如果是，你知道我为什么会收到这个错误吗？否则什么是正确的解决方案？

感谢您的帮助！

Answer 1

我找到了一种让它工作的方法，实际上正如我所提到的，从同一个块中导出所有内容是有效的（但在我的项目中并不负担得起）。

从观察中我得出的结论是，当从两个不同的块导入（或用于）时，不知何故创建了两个“myContext”实例。

MyProvider 正在像这样导入上下文：import myContext from '../../myContext

我的应用正在像这样导入上下文：import { myContext } from 'myLib/contexts'

所以我将上下文隔离在它自己的库中，以便无论如何都能以一致的方式导入它

现在，MyProvider 和我的应用正在以相同的方式导入此上下文：import { myContext } from 'mycontextlib'

确保他们在同一个实例上工作，并且值被很好地传播