Having an issue with my Nx monorepo which contains an Expo React Native app and various libraries. The problem arises when trying to import a component from a library within the application, resulting in
Error: Cannot resolve @monorepo/account-manager
Within the libs folder of my Nx workspace, there is a library called account-manager. Inside this library, there's a component App.tsx that I exported in the index.tsx file:
export {default as App} from "../src/app/App"
In my root tsconfig.base.json
, I added the following:
"paths": {
"@monorepo/account-manager": ["libs/account-manager/src/index.tsx"]
}
Then, I imported it into my project like this (Please ignore the naming):
import React from 'react';
import {App as Hello} from "@monorepo/account-manager"
const App = () => (
<Hello/>
);
export default App;
I generated the library using the command: npx nx g @nx/expo:library
The full error message after attempting to import the exported component reads as follows:
error: Error: Cannot resolve @monorepo/account-manager
at firstResolver (C:\DEV\monorepo\node_modules\@nx\expo\plugins\metro-resolver.js:33:15)
...
at DeltaCalculator._getChangedDependencies (C:\DEV\monorepo\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:151:25)
I have already tried renaming the file from index.ts => index.tsx
Additionally, I attempted adding the "paths"
object inside the projects tsconfig.json.