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! 🤘
Top comments (0)