Unable to import component from library inside application Nx Expo React Native

I'm working with an Nx monorepo that includes an Expo React Native app and several libraries. I've run into a problem where importing a component from a library within the application results in

Error: Cannot resolve @monorepo/account-manager

I have a library named account-manager within the libs folder of my Nx workspace. Inside this library, there's a component App.tsx which i exported inside the index.tsx file:

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

In my root tsconfig.base.json i added this:

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

And i am importing it like this in my project (Ignore the naming):

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


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

export default App;

I have generated the library with this command: npx nx g @nx/expo:library

The full error after trying to import the exported component is this:

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)

I have already tried to change the file name from index.ts => index.tsx In addition, i have tried to add the "paths" object inside the projects tsconfig.json.

Solution

There is currently a bug with Nx Expo Monorepos. I have found a github issue with a solution:

In this file metro.config.js of your app where you want to import the library, you need to add the path to your libs manually inside the watchFolders Array (The error is coming from the withNxMetro() function. Nx is working on a bugfix):

Adjust the watchfolders like this:

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

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

If you get an error about a babel-plugin-module-resolver, just install this library:

npm i babel-plugin-module-resolver

After this everything should be fine again.