Ошибка `` Модуль не найден '' с использованием Yarn 2 для связывания компонентов React

Question

Я создал репозиторий, содержащий приложение React (созданное с помощьюcreate-react-app) и каталог компонентов, содержащий простую кнопку пользовательского интерфейса материала. Структура папок:

/components
/react-app

Оба каталога настроены для использования Yarn 2 и не находятся в рабочей области (поскольку я пытаюсь моделировать проекты в отдельных каталогах и упростить свой сценарий реального мира).

Я собираю компоненты:

$ cd ~/components && yarn build

Затем я связываю компоненты с приложением React:

$ cd ~/react-app & yarn link ../components -r -p

Это приводит к модификации package.json файл в react-app каталог:

{
  "name": "react-app",
  ...
  "resolutions": {
    "components": "portal:../components"
  }
}

Мой App.tsx файл выглядит так:

import './App.css';

import { Button } from 'components';
import React from 'react';

function App() {
  return (
    <Button>Test</Button>
  );
}

export default App;

Однако, когда я запускаю приложение React, используя yarn start Я получаю следующую ошибку:

./src/App.tsx
Module not found: Your application tried to access components, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Я не уверен, что делаю не так. Если я добавлю явную ссылку на каталог компонентов внутриdependencies (что я не считаю, что мне нужно это делать, потому что я уже связал его), например:

"dependencies": {
  "components": "portal:../components"
}

Затем я получаю сообщение об ошибке:

./src/App.tsx
Module not found: You attempted to import ~/react-app/.yarn/$$virtual/components-virtual-de9a8055ab/2/components which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Конечно, мне не нужно извлекать приложение и искать способ обойти эту ошибку?

РЕДАКТИРОВАТЬ: Согласно документации Yarn "Webpack 5 будет изначально поддерживать PnP, но если вы используете Webpack 4, вам нужно будет добавить плагин pnp-webpack-plugin самостоятельно". На момент написания последняя версияcreate-react-app полагается на v3.4.1 из react-scriptsкоторый, в свою очередь, полагается на Webpack 4. Поэтому я выбросил свое приложение, чтобы проверить конфигурацию Webpack, и оказалось, что этот плагин уже установлен. Следовательно, это не проблема CRA/Webpack. Я также обновил свою версию Node с v10.16.0 до v12.16.3 безрезультатно.

Answer 1

TL; DR; Добавьте пакет в качестве зависимости, затем измените настройку React, чтобы импортировать файлы за пределами/src каталог.

В моем случае это не похоже yarn link делает что-нибудь кроме добавления resolutions вход в package.json, который, согласно документации, используется только для указания версии, которую нужно разрешить. Возможно, я неправильно понимаю ссылку на Yarn (хотя она сохранилась в v1).

Чтобы решить проблему, мне пришлось добавить ссылку на dependencies в package.json (хотя я уже запускал yarn link):

"dependencies": {
  "components": "portal:../components"
}

Это привело к вышеупомянутому You attempted to import components which falls outside of the project src/ directoryошибка. Чтобы решить эту проблему, нам нужно либо извлечь приложение React, либо отключитьModuleScopePlugin в Webpack (что позволяет импортировать файлы за пределы /srcпапка) или используйте Craco с пользовательской конфигурацией. Я создал yarn-eject а также craco ветви, чтобы продемонстрировать оба.

Это не особенно элегантное решение, и я надеюсь, что кто-то сможет опубликовать лучшую альтернативу. Я переключился на Yarn 2, чтобы использовать функцию "Улучшенные ссылки одноранговой зависимости" (так что я полагаюсь только на одну версиюreactчерез мои приложения и пакеты общих компонентов). Я бы предпочел не извлекать мое приложение React или использовать пользовательскую конфигурацию, если это возможно.