Monorepo 탐색 #1: 프로젝트 폴더를 만들 수 없나요?

The overview has improved greatly! The high-level architecture is now easily readable: We have two apps, and some libraries, so as a new hire I can quickly get a feel for what large-scale projects we work on.

And if we dive into web we see its package.json references the local dependency ../../libs/types , which makes it simple to understand at-a-glance that if I work on web I only need to understand libs/types code to get my work done. How amazing!

Unfortunately this solution doesn't work 😱😅. It's a frustrating conclusion because it can appear to work, but actually it breaks in various subtle ways

ℹ️ BTW, throughout this if you'd like to get back to a clean checkout state you can run this command: git clean -dxi .

If we begin from a clean checkout and start the web app we immediately hit an error:

$ cd apps/web
$ npm ci
$ npm start
../../libs/types/src/index.ts(1,23): error TS2307: Cannot find module 'type-fest' or its corresponding type declarations.

What happened? This has to do with how npm installs local dependencies:

When we run npm ci (or npm install , it's the same problem either way) local dependencies are handled in a special way: A local dependency is symlinked into the node_modules folder. In this case web depends on libs/types and we can see how it's just a symlink by looking in web's node_modules folder:

$ ls -a node_modules | grep types
types -> ../../../libs/types

But it is just a symlink, npm didn't install the dependencies of libs/types for us like it does for normal dependencies, and so we get the Cannot find module 'type-fest' error because the dependency tree of libs/types hasn't been resolved.

Does that mean if we manually install dependencies for libs/types then web will start working?

$ cd ../../libs/types/
$ npm ci
$ cd ../../apps/web
$ npm start
> Started on port 3000

Voila! But hang on, this is a brittle and time-wasting workflow because we have to manually install each of our own dependencies… that's what npm is supposed to do for us!

Maybe it's just npm that's the problem? Let's give Yarn a try.

First let's reset the repo and install yarn:

$ cd ../..
$ git clean -dxi .
$ npm install --global yarn

And now we can start web :

$ cd apps/web
$ yarn install
$ yarn start
> Started on port 3000

Hey that worked! Yarn actually fully installs local dependencies, including resolving their transient dependencies. So it avoids the "type-test" error 🎉

But this has a problem too: The dependency isn't "live", meaning changes to libs/types aren't reflected in apps/web until it re-installs its dependencies. That's not a good workflow!, we want to just change code and have it all working together, not worry about what state each project's node_modules folders is in.

And besides, apps/api has a problem too:

$ cd ../api
$ yarn install
$ yarn start
SyntaxError: Cannot use import statement outside a module

Is there a solution for this? Some Yarn or Typescript setting to use that will make it all work?

It feels a lot like we're chasing down problems that I've created for myself. We can't be the first ones to tackle this problem, right? I hope I've just missed a chunk of documentation that will set us right, if you got any suggestions I'm all ears!