"multiple copies of react" 模块的开发和发布需要 "yarn/npm link" 工作流

Question

我正在构建一个模块并将其发布到 npm。该模块依赖于 React。我目前正在使用 yarn 和 yarn link。

我已经在一个父项目中构建了这个模块，现在正试图将它提取到一个独立的模块中。我想继续在本地开发模块作为父项目的一部分。

模块中的 package.json 看起来像：

  "devDependencies": {
    "react": "^16.1.1",
    "react-reconciler": "^0.6.0",
    "react-dom": "^16.0.0",
    "regl": "^1.3.0",
}

我通过在模块目录中运行 yarn link 然后在父目录中 yarn link module-name 将此模块包含在父投影中。当包含在父项目中时，会抛出一个错误

Element ref was specified as a string (canvas) but no owner was set. You may have multiple copies of React loaded. (details: https://reactjs.org/warnings/refs-must-have-owner.html).

我之前曾使用 npm 而不是 yarn 尝试过此工作流程，但遇到了同样的问题。

我希望这是一个已解决的样板问题。我看过其他项目，但没有看到通用的解决方案。我正在寻找高级最佳实践答案。我愿意使用 webpack rollup 或其他任何配置。

Answer 1

我目前在我的项目中使用的选项包括完全跳过 npm/yarn 链接，并将 NPM 脚本添加到 symlink 任何本地包到 node_modules 文件夹如：

创建一个空 node_modules 文件夹
运行本地依赖链接脚本
从根项目安装 NPM 依赖项

如果模块和托管项目声明了兼容的 React 依赖项，您应该最终得到 本地模块符号链接 和 只有一个 React实例已安装.

您可能还想使用 this.

等工具自动链接本地依赖项

Answer 2

通过 Webpack，您可以使用 resolve.alias 和 npm/yarn link 一起使用，以便所有依赖项都使用主机应用程序中的单个 React 实例。

在您的开发 Webpack 配置中添加以下内容：

resolve: {
   alias: {
      react: path.resolve('./node_modules/react'),
   },
},

Answer 3

webpack 配置中的外部组件会有用。

// webpack.config.js
module.exports = {
  //...
  externals: ['react', 'react-dom'],
}

一般不需要安装react组件库

"multiple copies of react" 模块的开发和发布需要 "yarn/npm link" 工作流

Need a "yarn/npm link" workflow for dev and publishing for "multiple copies of react" module

javascript

reactjs

npm

yarnpkg