【发布时间】：2020-06-12 22:39:47
【问题描述】：
更新：
解决了。挂钩在简单的单声道存储库设置中工作正常，但我正在使用的更复杂的单声道存储库必须存在一些模块解析问题。
这是一个 CRA 应用程序的工作示例，TypeScript 组件，在 Lerna 单声道存储库中，该组件和应用程序使用钩子：https://github.com/adamplabarge/react-lerna-hooks
结束更新
第二次更新
我更新了我正在开发的真实应用程序，以将 react 和 react-dom 解析到同一个地方。由于它是一个 CRA 应用程序，我不得不使用 customize-cra 并添加了
addWebpackAlias({
['react$']: path.resolve(__dirname, './node_modules/react/'),
['react-dom$']: path.resolve(__dirname, './node_modules/react-dom/')
})
结束第二次更新
我希望能够在另一个现有的 React 应用程序中使用 Hooks 开发一个 React 组件。
我有 Lerna 的 repo 设置，并且有 /packages/app 和 /packages/component。
我可以使用 $ yarn start 启动应用程序（这是一个 CRA 应用程序），然后我为使用 webpack 配置构建和输出的组件（不是 CRA，只是一个普通的 TypeScript React 组件）运行构建和监视脚本/packages/component/build/index.js 中的 umd 文件。使用组件“main”中的package.json：“build/index.js”。
通过将组件添加到应用程序的 package.json 依赖项中，Lerna 会创建一个指向该组件的链接，我可以通过正常的导入过程在应用程序中使用它。
这很有效，直到添加一个钩子，它在多个 Reacts 问题上阻塞。
我能够让它工作的唯一方法是将 React 和 ReactDOM 添加到根级别 node_modules 并从 /packages/app/node_modules 和 /packages/component/node_modules 中删除这些包。当我这样做时，应用程序和组件都在根级别解析 React 和 ReactDOM 包，它们是完全相同的包。包的路径也完全相同。
我尝试在组件的 webpack 配置文件中设置 externals 键。我尝试过用许多不同的方式和其他外部插件来设置它。我尝试将 react 解析为 /packages/app/node_modules/react 中的 react 包的别名。我什至尝试在 package.json 中设置 file:{the path} 而不是版本。我也尝试过在组件的 package.json 中使用 resolutions 键。
没有任何效果。使用钩子时我可以让它工作的唯一方法是从 /packages/app/node_modules 和 /packages/component/node_modules 中的 node_modules 中删除 react 和 react-dom ，并且只将它放在 /root/nodule_modules 的 package.json 中。 json 和 lerna.json 已设置完毕。
我希望能够在不手动删除每个 lerna 包的 node_modules 中的 react 和 react-dom 的情况下使其正常工作。
还验证了每个版本的 react 都是一样的，并且没有违反 hooks 的规则。当 lerna 包从字面上解析为整个 repo 中的相同 /react/ 包时，它可以工作。
我还尝试将 /packages/component/ 中的 React 包设置为 peerDependencies 或 devDependencies。没有什么不同。
似乎让钩子起作用的唯一方法是当应用程序和组件 find 在同一路径上做出反应时。像 C:\project\node_modules\react
建议？问题？这让我发疯了！
【问题讨论】：
-
非常感谢您提供如此详细的解释。到现在为止，我觉得我是唯一一个遇到这个问题的倒霉人 :) 将“react”和“react-dom”移动到根目录确实解决了这个问题，但我也在寻找更实际的解决方案。
标签： node.js reactjs webpack lerna