Модуль не найден ошибка при использовании пряжи 2 для связи компонентов React - PullRequest
Новая
       36

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

0 голосов
/ 30 апреля 2020

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

/components
/react-app

Оба каталога настроены на использование Пряжа 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 с версии 10.16.0 до версии 12.16.3, но безрезультатно.

1 Ответ

0 голосов
/ 01 мая 2020

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

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

Чтобы устранить проблему, мне пришлось добавить ссылку на dependencies в пакете. 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 или использовать пользовательскую конфигурацию, если это возможно.

...