Using module-resolver for absolute paths within packages/app

[trymbill]

I've been trying to figure out how I can use absolute paths for imports within folders within packages/app/*.

Say I have a folder structure like this

.
└── my-app/
    ├── node_modules
    ├── apps/
    │   ├── expo
    │   └── nextjs
    └── packages/
        ├── custom-eslint-config
        └── app/
            ├── providers
            ├── components
            ├── theme
            └── utils

and I want to be able to import a component from the components folder from within the providers folder without using the relative path (i.e. ../components/MyComponent), but the absolute path with packages/app being the root (i.e. components/MyComponent).

My tsconfig.json already works this way by defining a baseUrl as ./ in packages/app, and TS doesn't complain. But Metro complains at runtime about not being able to resolve these modules. I've solved this in the past with the module-resolver babel plugin, but I've been unsuccessful to figure out a way for that to work in this monorepo setup.

I've tried adding a root babel.config.js with a babelrcRoots: ['.', './packages/*'] and a .babelrc.json in the packages/app with module-resolver alias' pointing to each folder. Same with a root babel.config.js pointing all the way through to each package. Running expo start --clean after each change to get past the cache. No dice.

Anyone know how I'd go about doing this? Or seen an example of a working monorepo like this?

[nandorojo]

The module resolver should work fine in your apps/expo. But I’m surprised you need it. It won’t let you import from app/*?

Can you check your node modules for another package named app?

[nandorojo]

can’t you import from app/features from anywhere?

or are you saying you want to import from features directly?

[nandorojo]

it seems like you’re missing app/ at the beginning

[trymbill]

True! I could just prepend app/ to the imports. I'm just used to thinking of each package folder as being its own "root" folder, and importing from that "root". But yeah, maybe it's just easier to import from app/features/user/detail-screen, or just go with the relative imports. I'm just not the biggest fan of ../../../ 😄

[nandorojo]

you can do that, you’d just want to put others inside of packages

the more common approach is to have @beatgig/* and each folder in packages in your monorepo represents one of those *

[nandorojo]

I'm just not the biggest fan of ../../../ 😄

yeah it’s pretty ugly. maybe you can configure auto import to prefer app/? not sure