3 killer tools to debug your Monorepos

Lately, I've been doing a lot of migration from single repositories to Monorepos. Here are three very handy tools to make these setups debugging easier.

1 - Yarn why / npm ls

If you're using Yarn, this is really useful for checking why a certain dependency is inside your codebase, how it got there and which packages are depending on it.

yarn why react

Official docs on Yarn why here.

If you're not a Yarn user, you can also use the following command:

npm ls

Run this itself to get to know about dependency errors inside your project (marked with red).

Or you can also check how many times a package got involved in your project by just giving the package name as a parameter

npm ls react

Be brave about resolving your dependency hells! 🍀

2 - Tame your TypeScript configs

So let's say we have something like this for the structure for your monorepo:

├─ apps/
│  ├─ frontend/
│  ├─ backend/
├─ packages/
│  ├─ tsconfig/
│  ├─ config/

It could happen that there is a tsconfig.json in your apps/frontend and also apps/backend folders and they're extending a base config from packages/tsconfig.

Also there could be more complex cases, so if you're curious at the end of the day how your final tsconfig.json will look like for a specific project you can do:

tsc -p apps/frontend --showConfig

This is going to print out the whole merged typescript config what the project will use.

Original idea from here, big shout out to Marius. 🎉

I also advise to record this into your root package.json as

"tsconfig:debug:frontend": "tsc -p apps/frontend --showConfig"

to give your team a nifty debug script that they can rely on.

3 - Ace your eslint configs

In my experience eslint configurations can blow up really quickly, especially when you're trying to make sense and merge from two different projects.

🤔 Not sure which plugins/rules are actually being used when you run eslint?

Try this for one of your files:

npx eslint --print-config apps/frontend/what/ever/your/file.ts

This will print out all the rules and plugins being used so you can grasp what's happening under the hood.

Summary

That's it for today, I wish you Happy debugging! 🤘