Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

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

$
0
0

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


Viewing all articles
Browse latest Browse all 6290

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>