Skip to main content
483

July 13th, 2022 × #npm#networking#home automation#testing

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

In this potluck episode, Wes and Scott discuss NAS networking, Home Assistant, peer dependencies in npm, and transpilation when using Vite and Vitest.

or
Topic 0 00:00

Transcript

Announcer

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

My name is Wes Bos.

Topic 1 00:59

Wes Bos introduces himself

Guest 2

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.

Topic 2 01:23

Scott talks about issues with his NAS drive

Guest 2

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

Guest 2

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.

Guest 2

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.

Guest 2

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.

Guest 2

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

Guest 2

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

Guest 2

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,

Topic 3 02:31

Scott configured PPPoE to get NAS working externally

Wes Bos

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.

Topic 4 03:19

Wes talks about dealing with ISP provided routers

Wes Bos

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.

Wes Bos

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.

Guest 2

Yeah. Totally.

Wes Bos

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.

Guest 2

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.

Topic 5 04:51

Scott got Home Assistant running on a Raspberry Pi

Guest 2

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.

Wes Bos

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.

Wes Bos

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.

Topic 6 05:53

Discussion on updating the look and feel of Home Assistant

Guest 2

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,

Wes Bos

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.

Guest 2

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.

Wes Bos

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

Wes Bos

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

Guest 2

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

Guest 2

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

Wes Bos

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

Wes Bos

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.

Topic 7 07:59

Question from listener on peer dependencies

Wes Bos

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

Wes Bos

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?

Guest 2

Oh, gosh. Let's look it up.

Wes Bos

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.

Guest 2

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

Guest 2

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

Wes Bos

die. So My gosh. Look. Awful.

Wes Bos

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

Topic 8 08:50

Explanation of peer dependencies in npm packages

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Topic 9 11:36

Discussion on issues with peer dependencies and version conflicts

Wes Bos

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

Wes Bos

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.

Wes Bos

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,

Topic 10 12:33

More discussion on pros/cons and edge cases of peer dependencies

Guest 2

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.

Guest 2

I actually hit this same issue.

Guest 2

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

Guest 2

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.

Guest 2

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

Topic 11 14:13

Clarifying transpilation setup when using Vite and Vitest

Wes Bos

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.

Wes Bos

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

Share