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

Я создал репозиторий, содержащий приложение 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, но безрезультатно.


reactjs yarnpkg yarnpkg-v2
person Craig Myles    schedule 30.04.2020    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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 и _ 12_, чтобы продемонстрировать и то, и другое.

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

person Craig Myles    schedule 01.05.2020
comment
Привет, Крейг, я пришел сюда по той же причине, что и вы (пряжа 2 для ссылок между реагирующими компонентами и работающими приложениями (без дублирующих зависимостей, без ручного связывания). Спасибо, это работает! Каков ваш рабочий процесс? выполнять большую часть своей разработки в компонентах изолированно с горячей перезагрузкой? Если вы хотите протестировать компонент в приложении, какие команды вам нужно запускать после каждой модификации? yarn run build в компоненте и перезапуск yarn start в app? Заранее спасибо, Джон - person jonenst; 26.06.2020