DEV Community

jozsefDevs
jozsefDevs

Posted on

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/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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! 🤘

Top comments (0)