Как предотвратить множественные копии реакций с загрузки?

В моем предыдущем приложении Meteor, используя browserify и React, все работало, пока я не переключился на пакет meteor.

Я использую реагирование-выбор в своих приложениях Meteor, и оно отлично работало, но с помощью browserify я мог предотвратить загрузку нескольких копий реакции, что предотвращает появление этой ошибки:

Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component 'render' method, or you have multiple copies of React loaded (details: 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"
  },

...

Есть ли в веб-пакете конфигурация, чтобы я мог использовать что-то внешнее? Не совсем уверен, что это значит, но комментарий сказал использовать:

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

Ответы

Ответ 1

Поскольку вы используете webpack, вы можете добавить псевдоним для загрузки, например:

// In webpack.config.js

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

Это предотвратило ошибку addComponentAsRefTo(...) и сделало нашу сборку успешной. Однако по какой-то причине тестовая сборка завершилась неудачей только в нашей среде CI, поскольку она не могла решить путь node_modules/react. Я думаю, что вряд ли вы столкнетесь с этой конкретной проблемой.

Ответ 2

Что-то, что сработало для меня, было:

Удалите все глобально установленные пакеты, связанные с реакцией (create-react-app, реагировать-натив, реагировать и т.д.)

затем: rm -rf node_modules

затем: используйте npm install вместо установки пряжи

рассмотрение приложения, созданного с помощью приложения crate-react-app и извлечения

Ответ 3

Если вы используете веб-пакет, вы можете исправить это, добавив следующее в конфигурацию Webpack для Не связывать реагировать или реагировать

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

Ответ 4

В моем случае я создавал отдельный модуль npm, затем включал это как библиотеку в другой проект локально, используя npm link ../some-library. Один из модулей внутри этой библиотеки вызвал эту ошибку при запуске родительского проекта.

Когда я столкнулся с этой ошибкой, решение для меня состояло в том, чтобы предотвратить реакцию реагирования и реагирования на вывод в библиотеке некоторых библиотек, добавив следующее в module.exports своего webpack.config.js:

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