Решение конфликта зависимостей NPM: vue-mapbox и mapbox-gl

Быстрый ответ

Для разрешения конфликта зависимостей в NPM используйте команду npm dedupe, которая избавит от дубликатов зависимостей, или указывайте версию пакета непосредственно в package.json:

"dependencies": {
  "conflicted-package": "x.x.x"
}

Для тех, кто использует Yarn, аналогичное решение предусматривает использование секции resolutions, позволяющей переопределить версии пакетов:

"resolutions": {
  "conflicted-package": "x.x.x"
}

Этим методом вы предложите пакетному менеджеру использовать строго определённую версию, что и разрешит конфликт.

Изменения в обработке peer-зависимостей в npm v7

npm v7 внесли масштабные изменения в управление peer-зависимостями, которые теперь могут приводить к конфликтам при установке. Чтобы избежать этого, необходимо применять команду:

npm install --legacy-peer-deps

Она обеспечит постепенный откат к способу управления peer-зависимостями, применяемому в npm v6, и при этом не потребует автоматической установки этих зависимостей.

Преодоление специфических конфликтов и зависимостей

Принудительное решение

Если ранее перечисленная команда не дала желаемого эффекта, попробуйте более радикальное решение:

npm install --force

Команда ослабит стандартные механизмы безопасности пакетного менеджера.

Подробнее об этом расскажет наш спикер на видео

Возвращение к проверенным методам

Также вы можете настроить npm на использование прежнего метода управления peer-зависимостями по умолчанию:

npm config set legacy-peer-deps true

Ручное управление

Если все методы оказались неэффективными, указывайте версии зависимостей вручную в package.json:

"overrides": {
  "mapbox-gl": "1.13.0"
}

Предотвращение конфликтов

Чтобы обезопасить себя от появления проблем в будущем, следуйте следующим принципам:

• Версии пакетов указывайте без использования символа "*".
• Внимательно изучите изменения в npm v7.
• При создании новых проектов на React используйте npx create-react-app со встроенным флагом --legacy-peer-deps.

Визуализация

Подставьте ваши зависимости в метафору о системе взаимосвязанных рек (🌊).

• Главная река (🏞️): Дерево зависимостей вашего проекта.
• Потоки (🔀): Отдельные пакеты.
• Стык потоков (🔗): Общие зависимости.

Конфликт случается в тот момент, когда два потока (🔀) собираются сойтись, но при этом вносят разные версии одной и той же зависимости:

• Поток A (🔀): Приносит версию зависимости 1.0 (🌀)
• Поток B (🔀): Имеет версию 2.0 (⛲)

Важно обеспечить гармоничное слияние потоков для непрерывного движения вдоль главной реки.

Когда инструмент npm audit становится спасателем

Иногда npm auditможет стать неоценимым инструментом в обнаружении и разрешении конфликтов зависимостей, обеспечивая тем самым безопасность проекта.

Когда ситуация осложняется

Работа с последними версиями ПО

При использовании самых свежих версий ПО вы можете столкнуться с необходимостью принимать на себя роль медиатора при управлении peer-зависимостями и вносить ​​исправления вручную.

Особенности управления зависимостями в SSR

В проектах, построенных на основе Nuxt.js, часто встречаются уникальные вопросы, вызванные различиями в работе клиентской и серверной среды, что требует особого внимания.

Управление монорепозиториями

При работе с монорепозиториями предпочтительно использовать инструменты вроде Lerna или Yarn Workspaces, упрощающие управление зависимостями.

Полезные материалы

1. package.json | Yarn — для глубокого понимания зависимостей.
2. npm-audit | npm Docs — как функция npm audit помогает в поддержании безопасности вашего проекта.
3. Issues · npm/npm · GitHub — следите за актуальными проблемами npm.
4. "Newest 'npm+dependencies' Questions – Stack Overflow" — вопросы и ответы о конфликтах зависимостей в npm.
5. npm-force-resolutions – npm — для более категоричного управления зависимостями.
6. npm Cheat Sheet – Kapeli — шпаргалка с полезными командами npm.
7. npm 7 is now generally available! – The GitHub Blog — здесь описываются изменения в npm v7.