reactjs - 有没有办法告诉 lerna/npm 到 'really look in my own node_modules for those peer dependencies' ？

Question

我有一个相当标准的 lerna monorepo，它看起来像这样:

packages/
    main/  - This is the main deployable application, it depends on both dep and react-dep
    dep/   - Just some pure functions, no problems here
    react-dep/ - A design system built with react, this is where we have problems. 

因此，一个真正常见的问题是，一旦您开始在依赖库中使用钩子(Hook)，您就会收到以下消息:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.

这是因为您的应用程序中有两个版本的 React，一个来自主应用程序，一个来自依赖项。

现在 - 我使用并有效的一个常见解决方案是声明 react和任何其他共享/对等依赖项为 externals在你的 webpack 配置中。 Eg, as suggested here.或查看 this Github issues thread from react .

但是，我不喜欢这个解决方案，首先，如果我不使用 webpack 怎么办，其次我不应该手动跟踪我需要标记为外部的依赖项。

我认为应该起作用的是:

在 react-dep我声明 react在这两个 devDependencies和 peerDependencies .我把它放在 devDependencies的原因是因为我的依赖库可能使用故事书或类似的东西来开发组件，所以我确实需要在开发中使用react。

如果我要发布 react-dep，我认为这应该可行到 npm 并使用 main 中的 npm 编译代码, 因为只有 dependencies将被取走。

但是，我认为由于 lerna 符号链接(symbolic link)，在这种情况下发生的情况是 dev 依赖仍然存在，我们得到了这个错误。

有没有办法为 lerna monorepo 解决这个问题？

这是演示此问题的 github 存储库: https://github.com/dwjohnston/lerna-react-monorepo

Answer 1

正如我所见，这个问题可能可以使用 lerna 来解决。 , npm , yarn或 webpack .
我想再推荐一个webpack那里的解决方案，打开了pr到你的 repo 。如果一个 webpack解决方案不适合您-请忽略此答案。

比externals好一点机制，因为它会自动跟踪重叠的对等依赖关系。

module.exports = function(config) {
    config.plugins.push(
        new NormalModuleReplacementPlugin(re, function(resource) {
            // first, remove babel and other loaders paths
            const requestWithoutLoaderMeta = resource.request.split('!');
            const requestPath = requestWithoutLoaderMeta.length && requestWithoutLoaderMeta[requestWithoutLoaderMeta.length - 1];

            if (requestPath) {
                // looking for a dependency and package names
                const packagesPath = resolve(__dirname, '../') + '/';
                const requestPathRel = requestPath.replace(packagesPath, '');
                const [packageName, _, depName] = requestPathRel.split('/');

                // if the main package has this dependency already - just use it
                if (dependencies[packageName]) {
                    console.log('\x1b[35m%s\x1b[0m', `[REPLACEMENT]: using dependency <${depName}> from package [main] instead of [${packageName}]`);
                    resource.request = resource.request.replace(`${packageName}/node_modules/${depName}`, `main/node_modules/${depName}`)
                }
            }
        })
    );

    return config;
}

此代码将解决您的对等依赖关系 main使用 webpack.NormalModuleReplacementPlugin 打包.

关于 webpack 的注意事项:由于所有三个前端大王都在他们的 CLI(angular、react、vue)中使用它，我认为您可以轻松安全地使用它来进行此类自定义。

I'm happy to hear about alternative technologies (eg. yarn) to solve this problem.

给 @nrwl/nx尝试下一个 monorepo 而不是 lerna .
主要区别在于 nrwl项目通常有一个 package.json仅(使用Google经验)，因此您需要为所有软件包安装一次依赖项，并且不会遇到您描述的问题。