Potluck - Peer Dependencies × Vitest × NVM and PNPM × Sprites

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

Welcome to syntax, the podcast with the tastiest web development treats rid. There, we've got a potluck for you today. This is where you submit the questions, and we will provide the answers. There's something for everybody, rid. In this order helpful operations in MongoDB, Scott says he moved to vite test, and I've got some questions about that. Rid. How does NVM relate to PNPM? How do you switch node versions? All kinds of really good stuff, so stay tuned. We are sponsored by 3 awesome companies.

1st one is Prismic, the headless website builder for Jamstack. 2nd 1 is Sanity, the unified content platform for digital experiences and LogRocket rid. JavaScript session replay. Figure out what went wrong and what your customers are doing on your website. We'll talk about all of them partway through the episode.

My name is Wes Bos.

With me as always is mister Scott Talinski having a cheese snack. How are you doing? Oh, I'm doing good, man. I got the cheese snack. Rid let's drink cheese. What's up? Yeah. No. I'm just hanging out. You know what? I I I did some major network work work this, this week, Wes. You know? So it turns out, rid. You know, I was having some major issues with my NAS drive being able to access it outside of my local network.

Yeah. And it wasn't just, like, port forwarding.

Like, at the end of the day, what we ended up having was, so we have CenturyLink Fiber, and CenturyLink's router has Some special configuration into it to kind of authenticate the network traffic. So they want you to use their router is really what it comes down to. Oh, yeah.

So what we had done is just plugged our router into the LAN port of their router, and we had double router going on. Yeah. Double router.

Yeah. And you couldn't put their router into bridge mode. It just wouldn't work. I've had that so many times in my life. It's just like you call them, like, how do you put bridge mode? They're like, what? No. Can't. What? Yeah. You you could put it in a bridge mode, but your Internet will not work if you do. So I I consulted, you know, the geniuses over at Reddit. And, basically, what I needed was my PPPOE credentials Yeah.

Which they give you if you bug them about it. They you you have to Do your your network of IPPPPPOE.

I forget how many p's are there. A lot of p's Point to point protocol over Ethernet.

Read. Right. And then you need a something ID. Man, I'm I'm blanking on all this stuff now, but you need to pass in an ID that it sends with every packet. And if they don't get that ID, then they don't send you the information. So I had to add that to my router. But, man, I gotta tell you, Once I it's something that's been bugging me forever. But once I figured that out, then I was able to open up the the correct port forwarding on my router because up and p m or Universal plug and play apparently is bad, but also didn't work anyways, so People always say it's bad for security. I was just wanting to get it working to see if I could get it working, but it wouldn't even work. So once I ported my ports, I got my NAS working externally yesterday,

and I'm so stoked about it, man. That could be awesome. Yeah. Stoked about. Rid. Yeah. I used to have, like, Internet over a phone line, like d DSL, and they didn't offer just a modem. Rid. And I finally switched to cable, and I was like, the guys come to install it. And I was like, I don't want whatever crappy ass router you're gonna give me. So they come waltzing in with the 2 in 1 router. I'm like, no. No. No. No. No. Like, I don't want that.

I I want just the modem. And then finally, they do all this. They rid. Go to their van and they find that one that they have just a modem.

And then you do the PoE on your on your radar yourself. And that does the authentication. But man, like, It's funny that these Internet companies don't want. I guess I kind of understand it rid because from, like, a customer support point of view, when there's, like, an issue, they don't want to have to be dealing with, like, whatever thing you want. Rid Everybody thinks they're a genius in all this networking stuff. Like, I'm part of the the WyzeCams, like, support group, rid And, like, those poor people on there, this everyone on there thinks they're literal genius with computers, and, like, you can tell that it's like everybody is just a little bit dangerous with with setting stuff up, and they're all complaining about everything. And you can tell that it's just it's user inflicted errors.

Yeah. Totally.

Yeah. But yeah. Modem modem only. Good. I'm glad you got that. That's that's set up. And I saw you bought a Raspberry Pi to run home assistant rid. Yeah.

Yeah. I got home assistant going, and I'm slowly getting everything kind of, integrated into home assistant. I didn't Have a ton of time to work on it last night because of the Stanley Cup finals, but, I did. I got I got a whole bunch of stuff added to it. I got My ecobee, I got just as many things possible just rigged up to it last night, and I was really psyched to see that even There's integrations for, like, our robot vacuum, which these are things that I've never been able to automate at all. So I I'm rid Really interested. The the sprinklers, everything connected.

It even, like, imported photos of our backyard from the sprinkler connection. Like, there There's so many nice little things so far. I I'm I'm I'm already getting into the point where I'm like, No, man. I really gotta write my own CSS for this.

Write my own CSS for this thing. Did you It's ugly. Right? Check out mushroom. So there's a there's a theme called mushroom for it, and it just makes it so much better because it's I still wanna remind you. There's something about the material UI.

It's been so done to death that any time I'm on a website that uses material, I'm like, this thing like, it just feels like it sucks and like no no shade to material UI and no shade to people that use it because it's not it doesn't suck. It's very good, but It's frustrating that it looks so bad and But also It's just dated.

It's dated. Right? Material UI, the original material UI is now 10 plus years old, more than that, more than 10 years old. And Google's not using it themselves anymore. They they have a new version. I like so, yeah, the old one, whatever the old,

Polymer like rid UI. Yeah. It's something that's even old at this point. It's old. I definitely would like to go down that rabbit hole of at least tweaking the look of it. Mhmm. To be something that looks a little bit nicer, but definitely throw the mushroom on there just for now because things get a lot better when it's Oh, they rounded the corners a little bit. They changed the colors. They take that annoying blue out of there. I know. And I I do want to just get in, add some nice shadows around the corners. Rid. Yeah.

Yeah. It it is funny. Mushroom looks nice, but although I don't I don't see a dark version of this thing. There is there's the dark version is much better than the light version. Yeah. I'm like rid Dracula over here. Somebody opened the blinds.

The the light versions has 2 the shadows are too heavy even on the light version.

You know, like, when someone has, like, a really heavy shadows on it, the dark version looks a 100 times better. And, oh, I'm almost always go for the light version of these things, and

So you can tell that it's good. I like a big chat. I mean, maybe I'll fork mushroom.

Maybe I'll just fork mushroom because this does look nice, But I would like to have my own tweaks to it because I'm

a psycho like that. Yeah. Let's make, like, a syntax theme or something for it and Oh, yeah.

Rid. Yeah. That sounds great. The mushroom one is done with all CSS variables, so I bet it's pretty easy to to tweak. Rid. All right. Let's get into the potluck. 1st question is from, Matias Carbell.

Hi. Great podcast. Casa Melissa listener from episode 1.

Would you please explain to me peer dependencies and how does it work? PNPM is yelling at me for unmet Pure dependencies, and I'm at Sophie's Choice. What's what does that mean? Sophie's Choice?

Oh, gosh. Let's look it up.

I don't know what it means, but I've heard it. It's What does it mean to make a Sophie's Choice? Sophie's Choice refers to an extremely difficult decision a person has to make. Rid. It describes a situation where no outcome is preferable over the other. It can be either because both outcomes are generally desirable or both are equally undesirable.

It's interesting, but the origins of it kind of woof.

It comes from the book, Sophie's Choice, in which a mother is forced to decide which of her Children will

die. So My gosh. Look. Awful.

Yeah. If I add it to my project, those peer dependencies, the yelling stops.

If I remove the original dependency in the future, I will have a peer dependency installed on my project that I may not need.

So I think Matthias here is saying, like, if I add if I add the dependencies to my project, the yelling goes away. But then I have this dependency I have to manage myself. Rid. Like, what's the point? Like, what's going on here? And this is a huge, cause of frustration only made worse by, I think, npm 7, rid Where your NPM will will not install, if you don't have the correct peer dependencies. So what peer dependencies are is rid When you install something, like, let's say, a React plug in, a React plug in will say, okay. I need React 16 or 17 or 18 to work. Rid. But I'm not going to ship react with it because, like, what like, if let's say you have 12 plug ins and they all ship react And they all ship a slightly different version of React. That's kind of a pain. And, likely, you're gonna have React. You're gonna you're gonna be the 1 supplying React. Right? Rid. So the idea is is that this thing is meant to work with React or this thing is meant to work with Svelte or this thing is meant to work with Express, but rid. You have to bring that yourself, and usually, they will give you a range of peer dependencies that it will meet.

And in You might be listening to me explain that and say, yeah. That actually sounds like a good idea.

The the pain starts to come where you have React plug in and React. It says, okay, React 16 or 17, and then React 18 comes out or React 19 comes out, rid. And the plug in hasn't been updated yet. It works fine. Like, it worked totally fine. No problems, but it hasn't been updated yet. Rid. So the npm install is gonna fail because you are on an a version of React that it doesn't support. But then you have another plug in that rid. Only works with the latest React and not the older version. So now you're in pure dependency hell where one works with 1, the other works with the other rid. Are and they haven't been updated. Huge pain in the butt. I even went through a whole suggesting that npm revert it because they, rid. They updated peer dependencies to fail the install entirely. You're right. Yeah. If you don't have the peer dependencies met. And in in my opinion, rid At least in every single use case in the last year, I've never actually had an issue with an API not being there. It always has just been rid. The author of a plug in or a package hasn't updated the pure dependency array yet, and and that's why it's sort of failing.

So what do I do? So for me, and this has been huge for my courses as well, because people hit this peer to pence issue and start freaking out and, oh, what's going on? This is annoying. Like, I hate when you npm install something. It just pukes a whole bunch of stuff up on you. You can put it rid. And you have an NPMRC file globally on your computer, but you can also put them in each of your projects.

Rid. And in your NPMRC file, you can say legacy underscore peer underscore depths equals rid. True.

And that will revert npm to the old way, and it's you you do run the risk of, like it It it will it will still tell you if your peer dependencies are not met, but it will not fail the install. And you can go ahead from there and make sure everything works. So that's my approach to it.

It's always just a bit of a pain, especially with JavaScript, where new versions of everything come out every 6 minutes. Yeah. It's tough,

especially because, you know, I think in theory, the pure dependencies thing makes a lot of sense where, You know, you want to be you want to have the the the right management. You wanna have the right versions of everything that everything wants.

I actually hit this same issue.

I hit the same issue yesterday dealing with stupid GraphQL stuff where you get that the dreaded error.

I I had posted a little meme that was, like, duplicate GraphQL in the, s h I t. Here we go again. Because, like, this This just happens every time you work with a GraphQL at all. It's it's a giant pain. But the only solution to that is to have GraphQL as a pure dependency.

It's there to save your bacon, but like you said, the escape hatch is there if you kinda know what you're doing. But if you don't know the the reasons why, Then maybe that's something you you should be a little bit cautious about at least. Alright. Next question for Michael v. When Scott says he switched to v test because he felt like rid. He was testing a different version of the code than he was actually being run than using just babble t s. Does that mean he's shipping e s m to the browser and not having in transpilation at all? I'm interested in switching rid. Vtest, but we don't. But don't we still need to transpile code for the browser to run it at the end of the day? Yes. I am not using Vtest for any Front end code, whatsoever. I'm using v test only to test my node stuff, and my node stuff is all ESM. So I'm shipping ESM in node. I'm I have full control over what node version I'm running and everything like that. So, I am shipping ESM. I'm running ESM in, prod on, a node code, and I am not transpiling that code except for

TypeScript to JavaScript. Yeah. And also, When I have worked with just in the past, I remember having I still I still use just myself, but I remember having different babble and webpack configs for just just so that you could import the ESM, rid. Whatever. And I was like, that's kind of annoying because what like, why do you have to have different configs for your your testing? And I'm sure I was doing something wrong. Or I remember hitting issues people. Yeah. Unfortunately, that's just the way it is.

But, I feel like the test. I keep saying v test is v test.