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

Make library chunks share the same react context with webpack

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

该库与 webpack 捆绑在一起并输出三个块，一个称为上下文，一个称为钩子，一个称为组件

在上下文中可以找到“myContext”react上下文(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，那么它会按预期工作，但我无法在实际用例中采用该解决方案。

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

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

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

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

感谢您的帮助！

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

根据观察，我得出的结论是，当从两个不同的块导入（或在其中使用）时，以某种方式创建了两个“myContext”实例。

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

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

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

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

确保它们在同一个实例上工作，并且值得到很好的传播