How would you structure your TSConfig if you had Apps/ and Packages/ ?

[mikecfisher]

Hi Auke I read your blog post. Thank you for writing this as I think its literally the only comprehensive resource on setting this pattern up. I'm having some jest issues that I believe are related to my tsconfig.

For reference we're building a monorepo that will contain a node backend, a react-native app, and a nextjs web app.

Our folder structure looks like this

root-folder
-apps/ 
--mobile/
--web/
--server/
-packages/
--shared-ui/
--utils/ 

In your config everything lives in a packages/ folder which is great but I don't see how to map that to this file structure. Specifically the baseUrl in your root tsconfig is "baseUrl": "./packages", but we sort of have 2 baseUrls in our app no?

In our app when I run tests on react-native using your config I get errors like this

 FAIL   mobile  apps/mobile/src/app.test.tsx
  ● Test suite failed to run

    SyntaxError: /Users/mike/dev/my-monorepo-app/node_modules/@react-native/polyfills/error-guard.js: Missing semicolon. (14:4)

      12 | let _inGuard = 0;
      13 |
    > 14 | type ErrorHandler = (error: mixed, isFatal: boolean) => void;
         |     ^
      15 | type Fn<Args, Return> = (...Args) => Return;
      16 |
      17 | /**

Also I should add that I believe in React Native expo apps I need to use babel in addition to the tools you mentioned.

Any idea on how you'd approach this? Also let me know if anything else jumps out to you regarding this. Thanks!