So I've got a monorepo I am trying to use based on this one:
This repo has 4 separate places where there is a package.json (and theoretically a tsconfig.json) - the app is partially TypeScript and partially Javascript (re-writing it gradually in TypeScript as time goes along)
Basically the directory structure looks like this:
/ - root directory/apps/expo - expo-related packages, configurations, functions, etc/apps/next - next-related packages, configuration, functions, etc/packages/app/ - general business logic, code, pages, etc
No matter what I am trying to do or where I am trying to setup the routing, it isn't working.
Inside my tsconfig.json in my root folder, I have this (I have also tried putting it in the individual tsconfig.json files of the individual folders):
"paths": {"app/*": ["./packages/app/*"],"components/*": ["./packages/app/components"],"config/*": ["./packages/app/config"],"controllers/*": ["./packages/app/controllers"],"pages/*": ["./packages/app/pages"],"reducers/*": ["./packages/app/redux"],"resources/*": ["./packages/app/resources"],"revenuecat/*": ["./packages/app/revenuecat"],"routing/*": ["./packages/app/routing"],"utils/*": ["./packages/app/utils"],"interfaces/*": ["./packages/app/interfaces"],"root/*": ["./*"]}
But none of these paths are recognized in my Next app.
I've tried putting in the babel.config.js of the Expo folder inside my plugins:
['module-resolver', { root: '../../packages', alias: { app: '../../packages/app', components: '../../packages/app/components', config: '../../packages/app/config', controllers: '../../packages/app/controllers', pages: '../../packages/app/pages', reducers: '../../packages/app/redux', resources: '../../packages/app/resources', revenuecat: '../../packages/app/revenuecat', routing: '../../packages/app/routing', utils: '../../packages/app/utils', interfaces: '../../packages/app/interfaces', }, }, ]
I've tried putting them in the .babelrc of the Next folder, also in my plugins:
["module-resolver", {"root": "../../packages","alias": {"app/*": "../../packages/app","components": "../../packages/app/components","config": "../../packages/app/config","controllers": "../../packages/app/controllers","pages": "../../packages/app/pages","reducers": "../../packages/app/redux","resources": "../../packages/app/resources","revenuecat": "../../packages/app/revenuecat","routing": "../../packages/app/routing","utils": "../../packages/app/utils","interfaces": "../../packages/app/interfaces" } }]
The code I am trying to run is my _app.js which calls my Footer file in my /packages/app/components/main folder. The _app.js works fine and it gets to my Footer.web.js file, but then I get:
error - ../../packages/app/components/main/Footer.web.js:4:0Module not found: Can't resolve 'components/main/AppButtons' 2 | import { FontAwesome } from '@expo/vector-icons'; 3 | import moment from 'moment';> 4 | import AppButtonGroup from 'components/main/AppButtons'; 5 | import { 6 | Row, 7 | Column,
Now Appbuttons.tsx is in the same folder as Footer.web.js
My guess is that I need another .babelrc file for my /packages/app folder? Or is it another error?
My workspaces are set like this in my root package.json:
"workspaces": ["apps/*","packages/*" ],
What is causing this to not work? Why is my pathing not working in my /packages/app folder?