Detecting Varied Dependencies

[00:00:00]
>> Mike North: The next tool I'm going to show you is called syncpack. And what this helps you do is detect variants in the versions of packages. Sorry, the variance in the versions of external dependencies that your packages depend on. So this is the tool that will help you identify how many versions of React are in your micro front ends.

[00:00:24]
And potentially it will help you consolidate down so that your checkout times. So your like npm install or pnpm install times are faster. And you're starting to benefit from the idea of a monorepo, which means there's a greater sense of sort of the whole repo advancing together. There is an alpha version of this.

[00:00:56]
They have a stable release that's like, I think they're V12 and we're using their V13. So by the time you take this course, it might not be alpha, but this will work today. It's just a faster version of the tool. So let's install it. And let's see what it did just now.

[00:01:22]
Just package.json and the lock file, makes sense. All right, now we're gonna do pnpm syncpack lint. No issues found. I have to create the issues. Sorry. I intended to sneakily drop in a bunch of problems here that we would be able to find. If you're copying and pasting from the course notes, you will find those things.

[00:01:51]
But here's what we're going to do. I'm going to say we're using TypeScript 5.7 here and in their server, we're going to say we're using TypeScript581. And then elsewhere we have 5.8.3, so pnpm i. 5.8.3 is, wait, what is it telling me? No, version 5.8.1. Maybe that package was pulled.

[00:02:36]
Really? Did I type a number that was greater than 5 or greater than 8? All right, so it's saying in server package.json. This error's not making any sense to me. We'll try that one, that's fine. A release candidate, great. Now it's telling me about the UI package. Sorry, I'm floundering a little bit as I try to get us onto a varied range of different TypeScript versions.

[00:03:11]
Great. So now I've got some 5.7.x version in my Ui package, some 5.6.x version in my server package. And in models, I'm going to float as far as I can in the 5.8 release stream. We should get a lint hit here, and we do. So we can see that it's telling us we've got three copies of TypeScript, and these are the things that it has identified.

[00:03:49]
Now, personally, I like the check like the lint command here. It also has a sync pack fix, which what that will do is go and forcibly bump these up. And I guess if you're super confident that that's gonna work out, okay, maybe that's what you wanna do. But in a project of any significant complexity, I would be doing these one at a time and I might have a check like this be part of a nightly build or a weekly build where I could sort of periodically get a report and keep tabs on how much floating is actually going on.

[00:04:30]
How much variance on certain packages is actually going on within my monorepo. So still a good tool. And imagine the case where you have 200 packages in your monorepo. This really will help you detect where things are getting a little weird, especially for patch versions. I think they have some arguments lint help where you can change the specifier types.

[00:05:11]
You can look for specific packages, whether they're runtime dependencies or dev dependencies or peer dependencies. So this would be like if your mission is we're reducing the variance in React, and we finally get everything on one REACT version, then you might have something like this. And in our case, it'd be,
>> Mike North: Something like that, where I will inline this into CI.

[00:05:47]
You have just introduced a new version of React. You can't do that. We fought hard to dedupe and we're holding the line. And so this is a nice tool that you can sort of inline into that and provide a very actionable failure message. I just love like, this is a CLI that someone put a lot of care into.