Что за Plug'n'Play?

Это стратегия установки пакетов, появившаяся в Yarn 2. С недавних пор она является стратегией по умолчанию, заменяя собой всем привычную установку в директорию node_modules. Но как она работает?

Первым делом Yarn разрешит зависимости проекта и установит их в собственный кэш, пропустив шаг с распаковкой (разархивированием) и сохранением в node_modules. Затем он создаст собственный загрузчик .pnp.cjs, содержащий всю информацию о дереве зависимостей проекта, позволяя сборщикам разрешать вызовы require и import.

Такой подход даёт ряд преимуществ, среди которых, например, более быстрая установка зависимостей и меньшее использование места на диске.

Проблема с TypeScript

Создавая проект или добавляя Yarn PnP в уже существующий проект с использованием TypeScript, велика вероятность, что вы столкнётесь со следующей ошибкой:

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

Но разве эту проблему не должен решать ранее упомянутый .pnp.cjs?

Решение проблемы

Как ни странно, попытка собрать проект закончилась успехом. Это навело на мысль, что проблема кроется именно в IDE (актуальная версия VSCode), и так оно и оказалось. Дело в том, что на текущий момент большинство IDE пытаются запустить TypeScript без учёта настроенного загрузчика в проекте. Для обхода этого существуют SDK, которые генерируют пакеты-посредники, которые при обращении автоматически настраивают загрузчик перед пересылкой вызовов require и import в реальные пакеты. Такие SDK существуют для многих популярных на сегодняшний день IDE.

Установка SDK выполняется в одну команду:

yarn dlx @yarnpkg/sdks <список IDE через пробел>

Например, если вы хотите установить SDK только для VSCode, то команда будет выглядеть так:

yarn dlx @yarnpkg/sdks vscode

Список всех доступных IDE, как и гайды по их настройке, можно найти в документации. 

После загрузки SDK, в случае с VSCode, появится уведомление о том, что текущая рабочая область содержит собственную версию TypeScript, использование которой необходимо разрешить (сделано в целях безопасности):

 Разрешаем IDE использовать её и ошибка пропадает.

Если планируете работать над проектом на нескольких машинах или точно знаете, какие IDE используют члены команды, можно облегчить жизнь и себе, и им, сохранив SDK и конфиги IDE в репозиторий. 

В данном случае достаточно добавить в систему контроля версий .yarn/sdks и .vscode.