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.
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
If you're not a Yarn user, you can also use the following command:
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! 🍀
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
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
"tsconfig:debug:frontend": "tsc -p apps/frontend --showConfig"
to give your team a nifty debug script that they can rely on.
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.
That's it for today, I wish you Happy debugging! 🤘