Невозможно импортировать компонент из библиотеки внутри приложения Nx Expo React Native

Я работаю с монорепозиторием Nx, который включает приложение Expo React Native и несколько библиотек. Я столкнулся с проблемой: импорт компонента из библиотеки в приложении приводит к

Error: Cannot resolve @monorepo/account-manager

У меня есть библиотека с именем account-manager в папке libs моего рабочего пространства Nx. Внутри этой библиотеки есть компонент App.tsx, который я экспортировал в файл index.tsx:

export {default as App} from "../src/app/App"

В свой корень tsconfig.base.json я добавил это:

    "paths": {
      "@monorepo/account-manager": ["libs/account-manager/src/index.tsx"]
    }

И я импортирую его в свой проект следующим образом (игнорируйте наименование):

import React from 'react';
import {App as Hello} from "@monorepo/account-manager"


const App = () => (
  <Hello/>
);

export default App;

Я создал библиотеку с помощью этой команды: npx nx g @nx/expo:library

Полная ошибка после попытки импортировать экспортированный компонент такова:

error: Error: Cannot resolve @monorepo/account-manager
    at firstResolver (C:\DEV\monorepo\node_modules\@nx\expo\plugins\metro-resolver.js:33:15)
    at firstResolver (C:\DEV\monorepo\node_modules\expo\node_modules\@expo\cli\src\start\server\metro\withMetroResolvers.ts:108:16)
    at resolveRequest (C:\DEV\monorepo\node_modules\expo\node_modules\@expo\cli\src\start\server\metro\withMetroResolvers.ts:137:16)
    at Object.resolve (C:\DEV\monorepo\node_modules\metro-resolver\src\resolve.js:32:12)
    at ModuleResolver.resolveDependency (C:\DEV\monorepo\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:73:31)
    at DependencyGraph.resolveDependency (C:\DEV\monorepo\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)
    at C:\DEV\monorepo\node_modules\metro\src\lib\transformHelpers.js:156:21
    at resolveDependencies (C:\DEV\monorepo\node_modules\metro\src\DeltaBundler\buildSubgraph.js:42:25)
    at visit (C:\DEV\monorepo\node_modules\metro\src\DeltaBundler\buildSubgraph.js:83:30)
    at async Promise.all (index 2)
    at visit (C:\DEV\monorepo\node_modules\metro\src\DeltaBundler\buildSubgraph.js:92:5)
    at async Promise.all (index 0)
    at buildSubgraph (C:\DEV\monorepo\node_modules\metro\src\DeltaBundler\buildSubgraph.js:103:3)
    at Graph._buildDelta (C:\DEV\monorepo\node_modules\metro\src\DeltaBundler\Graph.js:157:22)
    at Graph.initialTraverseDependencies (C:\DEV\monorepo\node_modules\metro\src\DeltaBundler\Graph.js:140:19)
    at DeltaCalculator._getChangedDependencies (C:\DEV\monorepo\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:151:25)

Я уже пытался изменить имя файла с index.ts => index.tsx. Кроме того, я попытался добавить объект "paths" внутри проекта tsconfig.json.

Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
1
0
154
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В настоящее время существует ошибка в монорепозиториях Nx Expo. Я нашел проблему на GitHub с решением:

В этом файле metro.config.js вашего приложения, куда вы хотите импортировать библиотеку, вам нужно вручную добавить путь к вашим библиотекам внутри массива watchFolders (ошибка возникает из-за функции withNxMetro(). Nx работает над исправлением ошибки):

Отрегулируйте watchfolders следующим образом:

const path = require('node:path');

watchFolders: [
  path.resolve("../..", "libs")
],

Если вы получите сообщение об ошибке babel-plugin-module-resolver, просто установите эту библиотеку:

npm i babel-plugin-module-resolver

После этого все снова должно быть в порядке.

Другие вопросы по теме