Как добиться единичного случая зависимости между несколькими проектами веб-пакетов?

Question

У меня есть проект, который состоит из приложения React и библиотеки компонентов React.(оба из которых являются моим собственным кодом).Приложение и библиотека представляют собой два отдельных пакета со своим собственным package.json и системой сборки на основе webpack.Приложение импортирует библиотеку и использует из нее компоненты React.

И приложение, и библиотека используют реакцию-маршрутизатор.Я сталкиваюсь с проблемой, когда я монтирую компонент из lib, который используетero-router, в моем приложении.Я получаю сообщение об ошибке «Ошибка: не удалось выполнить инвариант: вы не должны использовать <Route> вне <Router>»

Однако компонент <Route> фактически содержится в компоненте <Router>.

Я думаю, проблема в том, что <Router> отображается приложением, а <Route> отображается в библиотеке, и каждый из них использует свой экземпляр контекста реакции-маршрутизатора.

Я проверил эту теорию, импортировав <Route> как в приложение, так и в lib, и используя console.log для вывода компонента Route на консоль.

Когда я проверил два журнала, я обнаружил, что каждый зарегистрированный маршрут был отдельным экземпляром.Т.е. Route from app! == Route from lib, и я думаю, что именно поэтому response-router жалуется.

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

Answer 1

Итак, у вас есть следующая структура:

app/
  ...
  node_modules/
    lib/
      ...
      node_modules/

Ваш app импортирует Route из app/node_modules, а ваш lib импортирует Route из app/node_modules/lib/mode_modules.Это приводит к тому, что эти два Route экземпляра не совместно используют один и тот же контекст.

Вы бы хотели, чтобы app и lib импортировали связанные с маршрутизатором зависимости из одного и того же каталога node_modules.

Одним из решений было бы заставить app взглянуть на app/node_modules/lib/node_modules вместо app/node_modules при импорте Route и Router.

. Вы можете сделать это, поставив node_modules/lib/node_modules передnode_modules в разделе modules конфигурации веб-пакета app с использованием resol-modules :

modules: [
  path.resolve(__dirname, 'node_modules/lib/node_modules'),
  'node_modules'
]

Answer 2

Проблема вызвана зависимостями допплегангера . Это сообщение в блоге описывает проблему и решение, которое заключается в настройке псевдонимов в веб-пакете для общих модулей, указывающих на основную папку node_modules.