web-dev-qa-db-ja.com

Reactの複数のコピーが読み込まれないようにするにはどうすればよいですか？

以前のMeteorアプリでは、browserifyとReactを使用しており、 meteor webpack に切り替えるまではすべて動作していました。

Meteorアプリで react-select を使用しましたが、うまく機能しましたが、browserifyを使用すると、reactの複数のコピーが読み込まれないようにして、このエラーを防ぐことができます。

エラー：不変の違反：addComponentAsRefTo（...）：参照を持つことができるのはReactOwnerだけです。コンポーネントの `render`メソッド内で作成されなかったコンポーネントに参照を追加するか、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'
}
javascriptmeteorreactjswebpack
16
Sylar

Webpackを使用するため、次のように、reactをロードするためのエイリアスを追加できます。

_// In webpack.config.js

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

これにより、addComponentAsRefTo(...)エラーが回避され、ビルドが再び成功しました。ただし、何らかの理由で、_node_modules/react_パスを解決できなかったため、テストビルドはCI環境でのみ失敗しました。ただし、この特定の問題が発生する可能性は低いと思います。

15
joepio

私にとってうまくいったことは：

反応に関連するグローバルにインストールされたすべてのパッケージをアンインストールします（create-react-app、react-native、reactなど）。

次に：rm -rf node_modules

次に：npm install糸のインストールの代わりに

crate-react-appで作成され、排出されたアプリを検討

1
Caio Abe

私の場合、別のnpmモジュールをビルドしてから、npm link ../some-library。親プロジェクトを実行すると、そのライブラリー内のモジュールの1つがこのエラーを引き起こしました。

このエラーに遭遇したときの解決策は、次のコードをwebpack.config.jsのmodule.exportsに追加して、reactおよびreact-domが一部のライブラリバンドル出力に含まれないようにすることです。

externals: {
    react: 'react',
    'react-dom': 'react-dom'
}
1
Mitch Downey

Webパックを使用する場合は、次のコードをWebpack構成に追加して、Do n't bundle reactまたはreact-domのWebpack構成に追加します。

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

1
mitesh7172