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

I did. I got I got a whole bunch of stuff added to it. I got My ecobee,

It's been so done to death 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.

integrated into home assistant. I didn't Have a ton of time to work on it last night because of the Stanley Cup finals,

I got Yeah.

I'm already getting into the point where I'm like, No, man. I really gotta write my own CSS for this.

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 UI, the original material UI is now

I'm 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

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.

and I'm at Sophie's Choice. What's what does that mean? Sophie's Choice? All kinds of really good stuff, so stay tuned. We are sponsored by 3 awesome companies.

Oh, gosh. Let's look it up.

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

It comes from the book, Sophie's Choice, in which a mother is forced to decide which of her Children will the network traffic. So they want you to use their router is really what it comes down to. Oh, yeah.

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

die. So My gosh. Look. Awful.

is bad, but also didn't work anyways, so 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,

yesterday,

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 It's dated. Right? Material

then

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, but,

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

like d DSL, and they didn't offer by, I think, npm new versions of everything come out every 6 minutes. Yeah. It's tough,

the WyzeCams, like, support group, rid And, like, those poor people I feel like the test. I keep saying v test is v test.

Yeah. I got home assistant going, and I'm slowly getting everything kind of,

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.

Internet companies don't want. I guess I kind of understand it rid because from, like, a customer support point of view,

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.

Yeah. Totally.

And then you do the PoE

on your on your radar yourself. And that does the authentication. But man, like, It's funny that 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? if you don't have the correct peer dependencies. So what peer dependencies are is

Internet over a phone line, but

Yeah. But Would you please explain to me peer dependencies and how does it work? PNPM is yelling at me for unmet Pure dependencies,

it's user inflicted errors.

these 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

Some special configuration into it to kind of authenticate

your network of IPPPPPOE.

has

Read. Right. And then you need a

so we have CenturyLink Fiber, and CenturyLink's they don't send you the information. So I had to add that to my router. But, man, I gotta tell you,

So what we had done is just plugged our router into the LAN port

credentials Once I it's something that's been bugging me forever. But once I figured that out,

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

router

Like, at the end of the day, what we ended up having was,

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 forget how many p's are there. A lot of p's Point to point protocol over Ethernet.

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

of their router, and we had double router going on. Yeah. Double router.

I I consulted, you know, the geniuses over at Reddit. And, basically, what I needed was my PPPOE

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 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 have full control over what node version I'm running and everything like that. So, 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.

Yes. I am not using Vtest for any prod

on, a node code, and I am not transpiling that code except for

in node. I'm I am shipping ESM. I'm running ESM in,

And that will revert npm to the old way, and it's

It's always just a bit of a pain, especially with JavaScript, where 1st one is Prismic, the headless website builder for Jamstack. 2nd 1 is Sanity, the unified content platform for digital experiences and LogRocket and I'm so stoked about it, man. That could be awesome. Yeah. Stoked about. Rid. Yeah. I used to have, like,

Rid. And in your NPMRC file, you can say legacy

underscore peer underscore depths equals Matias

rid. True.

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

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.

you you do run the risk of, like

rid. In this order helpful operations in MongoDB, cause of frustration only made worse

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.

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.

My name is Wes Bos.

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

that any time I'm on a website 7, rid Where your NPM will because both outcomes are generally desirable or both are equally undesirable.

at least tweaking

that it looks so bad file globally on your computer, but you can also put them in each of your projects.

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 Carbell.

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, 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?

that uses material, I'm like, this thing like, it just feels like it sucks 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 Hi. Great podcast. Casa Melissa listener from episode 1.

and But also It's just dated.

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.

rid. Whatever. And I was like, that's kind of annoying because

babble and webpack configs

I still I still use just myself, but I remember having different

just so that you could

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.

import the ESM, 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.

for just 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 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

TypeScript to JavaScript. Yeah. And also, 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

But,

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 and 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 a psycho like that. Yeah. Let's make, like, a syntax theme or something for it and Oh, yeah.

suggesting that npm revert it because they, with with setting stuff up, and they're all complaining about everything. And you can tell that it's just 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 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

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, The the pain starts to come where you have

React plug in and React. It says, okay, React 16 or 17,

hasn't updated the pure dependency array yet, and and that's why it's sort of failing.

So I think Matthias here is saying, 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, 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,

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,

and then React 18 comes out or React 19 comes out, When I have worked with just in the past, I remember having

rid. You have to bring that yourself,

will not install,

And in

because you are on an a version of React that it doesn't support. But then you have another plug in 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 The the light versions has 2 the shadows are too heavy even on the light version.

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

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 When you install something, like, let's say, a React plug in, 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, You might be listening to me explain that and say, yeah. That actually sounds like a good idea.

and usually, they will give you a range of peer dependencies that it will meet.

rid. You know, I was having some major issues with my NAS drive being able to access it outside of my local network.

this week, Wes. You know? So it turns out,

I actually hit this same issue.

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.

in the,

s h I t. Here we go again. Because, like,

I I had posted a little meme that was, like, duplicate GraphQL

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

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,