如何防止加载多个 React 副本？

IT技术 javascript meteor reactjs webpack
2021-04-23 03:42:26

在我之前的 Meteor 应用程序中，使用 browserify 和 React，一切正常，直到我切换到meteor webpack。

我在我的 Meteor 应用程序中使用react-select并且它工作得很好但是使用 browserify 我可以防止加载多个 react 副本，从而防止我现在遇到的这个错误：

错误：不变违规：addComponentAsRefTo(...)：只有 ReactOwner 可以有 refs。您可能正在向未在组件的 `render` 方法中创建的组件添加 ref，或者您加载了多个 React 副本（详细信息：https://fb.me/react-refs-must-have-owner） .

我的 package.json 看起来像这样：

...

"dependencies": {
    "classnames": "^2.1.3",
    "lodash": "^3.10.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-mixin": "^2.0.1",
    "react-select": "^1.0.0-beta8"
  },

...

webpack 中是否有配置我可以使用称为外部的东西？不完全确定这意味着什么，但评论说使用：

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM'
}
4个回答

由于您使用 webpack，您可以添加一个别名来加载 react，如下所示：

// In webpack.config.js

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

这防止了addComponentAsRefTo(...)错误并使我们的构建再次成功。但是，由于某种原因，测试构建仅在我们的 CI 环境中失败，因为它无法解析node_modules/react路径。不过，我认为您不太可能遇到这个特殊问题。

这可能是您的部门不匹配。卸载您的依赖项，react-select在这种情况下，请检查react您的依赖项的版本并安装它。再次安装您的依赖项，并npm应从对等依赖项中删除重复项，而不是创建新副本。该文档还解释了可能产生此错误的三种情况reactjs.org/warnings/refs-must-have-owner.html
2021-05-27 03:42:26
这个解决方案救了我！谢谢你。
2021-06-01 03:42:26
react: require.resolve('react')似乎也可以工作，并且应该在reactmodule所在的任何地方继续工作。
2021-06-05 03:42:26

对我有用的是：

卸载所有与 react 相关的全局安装包（create-react-app、react-native、react 等）

然后： rm -rf node_modules

然后：使用npm install代替纱线安装

考虑使用 crate-react-app 创建并弹出的应用程序

crate-react-app 中的错字；我想你可能是说create-react-app
2021-05-30 03:42:26

就我而言，我正在构建一个单独的 npm module，然后使用npm link ../some-library. 当我运行父项目时，该库中的一个module导致了这个错误。

当我遇到这个错误时，我的解决方案是通过将以下内容添加到其 webpack.config.js 的 module.exports 来防止 react 和 react-dom 包含在 some-library 包输出中：

externals: {
    react: 'react',
    'react-dom': 'react-dom'
}
将此添加到我的配置时，我收到“未捕获的 ReferenceError：未定义反应”。
2021-05-25 03:42:26

如果您使用 webpack，那么您可以通过将以下内容添加到 Webpack 配置中来修复它，以便不要捆绑 react 或 react-dom

externals: { 'react': 'React', 'react-dom': 'ReactDOM' }

其它你可能感兴趣的问题
上一篇从构造函数调用操作与生命周期方法 下一篇使用 React-Native 导航传递数据