如何实现跨多个webpack项目的单实例依赖？

Question

我有一个由 React 应用程序和 React 组件库组成的项目。（这两个都是我自己的代码）。应用程序和库是两个独立的包，有自己的 package.json 和基于 webpack 的构建系统。该应用程序导入库并使用其中的 React 组件。

app和lib都使用了react-router。当我在我的应用程序中从使用 react-router 的 lib 安装组件时遇到问题。我收到错误 "Error: Invariant failed: You should not use <Route> outside a <Router>"

但是 <Route> 组件实际上包含在 <Router> 组件中。

我认为问题是 <Router> 是由应用程序渲染的，而 <Route> 是在库中渲染的，并且每个都使用不同的 react-router 上下文实例。

我通过在应用程序和库中导入 <Route> 并使用 console.log 将 Route 组件输出到控制台来测试这个理论。

当我检查两个日志时，我发现每个记录的 Route 都是不同的实例。 IE。来自 app 的路由！== 来自 lib 的路由，我认为这就是 react-router 抱怨的原因。

如何配置 webpack 以确保应用程序和库都使用相同的 react-router 实例？

Answer 1

因此，您具有以下结构：

app/
  ...
  node_modules/
    lib/
      ...
      node_modules/

您的 app 从 app/node_modules 导入 Route，您的 lib 从 app/node_modules/lib/mode_modules 导入 Route。这使得这两个 Route 实例不共享相同的上下文。

您希望 app 和 lib 从同一个 node_modules 目录导入与路由器相关的依赖项。

一个解决方案是在导入 Route 和 Router.

时让 app 查看 app/node_modules/lib/node_modules 而不是 app/node_modules

你可以通过在 apps webpack 配置的 modules 部分中的 node_modules 之前放置 node_modules/lib/node_modules 来完成此操作 resolve-modules:

modules: [
  path.resolve(__dirname, 'node_modules/lib/node_modules'),
  'node_modules'
]

Answer 2

问题是由 doppleganger dependencies. This blog post 描述的问题和解决方案，即在 webpack 中为通用模块设置别名以指向主 node_modules 文件夹。

Answer 3

出于某种原因，只有别名可以帮助我进行 monorepo yarn 2 pnp webpack 设置。感谢@jack-allen 的回答给了我正确的方向。

{
  resolve: {
    alias: {
      'react-i18next': require.resolve('react-i18next'), 
    }
  }
}

How to achieve single instance of dependency across multiple webpack projects?