在开发外部组件时如何避免"加载两个React副本"错误？

Question

我正在开发一个外部组件(比方说my-component,我链接到项目npm link(因为它正在进行中,我需要包来反映更改).

在my-component文件夹中有node_modules/react,node_modules/react-dom因为它们是它的依赖项.但是它们是peerIpendences,所以我没想把它们带到链接这个包的项目中.

但是在使用时npm link,它会链接整个目录,包括node_modules.因此,当项目构建时,它包括2次包:来自node_modules/*和来自node_modules/my-component/node_modules/*.

这开始影响组件何时使用ReactDOM.findDOMNode,它会导致此错误:

Warning: React can't find the root component node for data-reactid value `.0.2.0`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.

此外,它可能有助于了解发生了什么:只有当都出现问题node_modules/my-component/node_modules/react和node_modules/my-component/node_modules/react-dom.如果只有其中一个,则没有错误消息.

通常的软件包安装不会带来这样的错误,因为没有node_modules/react-dom.

如何同时开发外部组件和项目？

Answer 1

问题是双重的：

1. 您不能加载 2 个 react 副本。
2. npm link 创建一个符号链接，但是“require”不尊重符号链接，当它尝试向上导航目录时，它永远不会找到父项目的反应。

解决方案：

您所要做的就是将组件中的 react 和 react-dom 链接到父项目的 node_modules 文件夹中的 react 和 react-dom 。

转到您的组件项目并删除 react 和 react-dom 然后执行

npm link ../myproject/node_modules/react
npm link ../myproject/node_modules/react-dom

Answer 2

比我更聪明的人（@mojodna）提出了这个解决方案：从外部组件中删除重复的依赖项，并使用项目的这些依赖项的副本来解决它们。

步骤 1：从外部组件中删除依赖项node_modules

正如@cleong 指出的，您不能只从外部组件中删除依赖项node_modules，因为当项目的构建步骤遇到外部组件中现在缺少的依赖项时，它将会失败。

第 2 步：将您的项目添加node_modules到NODE_PATH

要解决此问题，您可以在运行构建步骤时将项目附加node_modules到环境变量中。NODE_PATH像这样的东西：

NODE_PATH=$(pwd)/node_modules/ npm start

（npm start通过 Browserify、Webpack 等捆绑外部组件的脚本在哪里）

事实上，您始终可以将该NODE_PATH添加内容附加到您的构建脚本中，并且无论您是否npm link添加了任何内容，它都会起作用。（让我想知道这是否不应该是默认npm行为......）

注意：我留下了现有的答案，因为那里有一些对话，这是一个不同的（也是更好的）解决方案。

Answer 3

通过将其react-dom作为别名添加到我的webpack配置中进行了修复

alias: {

    react$: require.resolve(path.join(constants.NODE_MODULES_DIR, 'react')),
    'react-dom': require.resolve(path.join(constants.NODE_MODULES_DIR, 'react-dom'))

}

Answer 4

我相信答案是指定react,并react-dom为peerDependencies您的外部组件package.json.我可以在这里和这里遵循,npm link应该(npm@3不再)安装peerDependencies(或者'devDependencies').

Aaaand我只是更仔细地阅读你的帖子,并意识到你已经将它们指定为peerDependencies.因此,我认为答案归结为:

升级到npm@3:

npm install -g npm@3.0-latest