Universal pathing in a React app with multiple workspaces - how to do it?

So I've got a monorepo I am trying to use based on this one:

https://github.com/GeekyAnts/nativebase-templates/blob/master/solito-universal-app-template-nativebase/

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:0
Module 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?

from Universal pathing in a React app with multiple workspaces - how to do it?