Node.js 如何？将多个React应用程序解析为同一个'；反应'；使用webpack/lerna的包路径

更新：

解决了。钩子在一个简单的mono-repo设置中可以很好地工作，但是在我使用的更复杂的mono-repo中肯定存在一些模块分辨率问题

下面是一个在Lerna mono repo中使用CRA应用程序TypeScript组件的工作示例，该组件和应用程序使用挂钩：

结束更新

第二次更新

我更新了我正在开发的真实应用程序，以将react和react dom解析到同一个位置。因为这是一个CRA应用程序，我不得不使用自定义CRA并添加

addWebPackageAlias({
['react$']：path.resolve（_dirname，./node_modules/react/），
['react-dom$']：path.resolve（uu dirname'。/node_modules/react-dom/）
})

结束第二次更新

我希望能够在另一个现有的React应用程序中开发一个带有挂钩的React组件

我用Lerna设置了回购协议，并且有/packages/app和/packages/component

我可以用$THEAN start启动应用程序（这是一个CRA应用程序），并为组件（不是CRA，只是一个普通的TypeScript React组件）运行构建和监视脚本，该组件使用webpack配置在/packages/component/build/index.js处构建和输出umd文件。组件“main”中的package.json为“build/index.js”

通过将组件添加到应用程序的package.json依赖项，Lerna创建了一个指向该组件的链接，我可以通过正常的导入过程在应用程序中使用它

这非常有效，直到添加了一个钩子，钩子被多重反应问题阻塞

我能够实现这一点的唯一方法是将React和ReactDOM添加到根级别的node_模块，并从/packages/app/node_模块和/packages/component/node_模块中删除这些包。当我这样做时，应用程序和组件在根级别解析React和ReactDOM包，它们是完全相同的包。也可以使用与包完全相同的路径

我已尝试在组件的webpack配置文件中设置externals键。我尝试过用许多不同的方式和其他外部插件来设置它。我已尝试将react解析为/packages/app/node_modules/react中react包的别名。我甚至尝试在package.json中设置文件：{the path}，而不是设置版本。我还尝试使用组件的package.json中的resolutions键

什么都没起作用。在使用钩子时，我可以使其工作的唯一方法是从/packages/app/node_模块和/packages/component/node_模块中的节点_模块中删除react和react dom，并且只在设置package.json和lerna.json的/root/nomble_模块中使用它

我希望能够通过手动删除每个lerna包的node_模块中的react和react dom来获得此工作

我们还验证了react的每个版本都是相同的，并且没有违反挂钩规则。当lerna包在整个回购协议中解析为相同的/react/package时，它就起作用了

我还尝试将/packages/component/中的React包设置为peerdependency和/或devdependency。没什么不同

看起来让钩子工作的唯一方法是当应用程序和组件find在同一条路径上反应时。像C:\project\node\u modules\react

---

建议？问题？这简直快把我逼疯了

老问题，但没有答案，所以这是我的看法

我的设置也有同样的问题：

• 勒纳·莫诺雷波
• 多个包（一些带有简单的JS类，另一些带有React组件）
• React应用程序

我只需在所有React组件文件夹中执行以下操作即可解决问题：

---

npm链接非常感谢您的详细解释。到目前为止，我觉得我是唯一一个不幸面对这个问题的人：）将“react”和“react dom”移动到根目录确实解决了这个问题，但我也在寻找一个更实际的解决方案。