Node.js CJS → ESM

rid. Back that works in the browser yes, some for me too. Like, it was I I started at ESM way too early, and, like, most of the things I hit were packages Not publishing ESM versions yet or versions that,

is a big deal.

And it's nice not to have to, are you compiling and running ESM on the Server or are you compiling and running common JS on the server? ESM on the server for my API. That's what I did as well is that I said, like, I don't because It's kind of confusing as you can write ESM. I'm using air quotes here and compile to CommonJS to ESM rid. ECMAScript modules. So this is a big transition that's been happening in the node ecosystem for a while.

you know,

like, have a have a iffy or something like that. I'm a big fan of that. Yeah. And sometimes you just import a file, And you want that file to run and do something. You don't need to even

Sentry. I just want Sentry to initialize, so I import the file. When that file Opens up. It will start to initialize, you know? Yeah. You you fire it up and you don't care about like like, obviously, you can catch any errors and log them if that happens, but you're not waiting for rid The thing to come back, it was rid Very easy for me to quickly go in.

that spec and make it work according to the spec so that ideally you'd be able to share code

Kevin

By having a spec, they can implement it in Node. Js, in Deno, in the Cloudflare Workers, in the browser in like literally anywhere that wants to support JavaScript. They have to implement It's I think I'm not node APIs because that would not work if it was client side. Yeah. You you talk and I'll I'll I'll check out my chunks while that's going on. Okay. I also use that was

for all module systems. But, very happy,

And some of the reasons behind that is,

Dangore

between your front end and your back end with no issues. I didn't realize that common JS was created by Mozilla.

in January of 2009

Was it really? Up some history on this. Yeah. I didn't either.

rid. I guess being statically analyzed makes that even easier. Yep. And, I mean, you've you've stated this a couple of times, but the fact that it's a browser

And just because it was so foreign to everybody at the time, you know, like, what are we doing? And then by the end of it, I remember being like, wait. Why are we doing this? Rid My god. I'm just serving an HTML file. What what why is this so interesting?

Rid. What else do we have here? It's apparently more performant.

2009, Yeah. And at the very bottom of the page, you run it or you have an iffy that's a sync and it runs immediately. That's annoying because if you want to, JS files.

the different one there's a bunch of differences between CommonJS and ESM, but, rid. One of the ones is that ESM is what's called statically analyzed, meaning that, That's kind of annoying. And I thought, like, okay, like, I'm logging any errors, but, like, maybe that's a better Maybe this is an entire different show, but in so in my app platform I have when somebody buys something, there's a number of, like,

rid. And this was created January 2009. 2000. Wow.

Yeah.

Rid. Yeah. No. I didn't I didn't necessarily realize that. Maybe yeah. Maybe if it wasn't a Mozilla

rid. The the benefit to that apparently is, like, better tree shaking, meaning that you'll be able to figure out which parts of the code you do and do not need. Rid. I know, like, Vite and Webpack and all these things have gotten pretty good at figuring that out, And then the .js

the lack of common accepted modality practices in programming.

I I don't see here if it was, like, a Mozilla thing or if it was just Kevin doing it for himself. When was Node. Js created?

dash development and config dash production. And I would just take the note M rid Mhmm. And, or you could, I had, like, a string that was like of my config file was config

So props to Ryan for taking this 3 month old project. Did I don't know. Didn't did Node have and you can run-in CommonJS, you can ship as CommonJS.

Comment JS was started by mo by Mozilla engineer

So

because

rid What's a very wild thing to me is that I completely

I'm gonna rip it all out at once and then you should put it back together. Yeah. So, is still just a string. So this the the import, the raw import is still just a it's now just a constant variable string of the template.

I will choose to use ESM

ECMAScript modules, Dino and BUN also support just npm colon package name, that is a sync. I would I would have a function called go and then it's called start.

When I rewrote my API, wait for that promise to resolve or do anything like that. Like, you know, I just want, You know, this thing to start up and start doing its thing or or this to initialize, Yes. It's seriously one of my favorite things about Vee, because sometimes you do just want to import a file as text and not as JavaScript or anything. And I did this when I I wrote my, like, storybook thing. I was importing a file as text to parse some things out of it. And I found this to be really super easy, and the way you do that in Vite is just by import whatever you want, question mark, raw.

ESM or imports compiled to CJS to straight up ESM,

using ES build, I wrote it with ESM from the start. So, yeah, I I get to control my environment to the point where I can control my node version. I can control everything.

I'm I'm the type of guy. If I'm ripping stuff out,

CJS syntax to the point where When I see c j s common JS Yeah. As they go, just just timing them. And based on how long the request takes, it gives me different emoji.

Syntax style for everything, and then it compiled it to c j s behind the scenes. And then so when I moved the site over to,

ESM, and actually running it on the server in.

You either do it now at the point when you're making all the big changes or you do it later at some other point. And,

missed

Like a real wire? I almost always have to I don't have to look it up, but I'm always like, Wait. What is the how do I do that again? Because I just flat out never use that style as Meteor by default import

and now with Svelte and whatever.

off of Meteor, I moved it first to just a straight up Vite server with React, and that was ESM based. So I went from imports compiled to,

And then there's the second one, which is like going

ESM

No problem.

But I should say that, programmatically

rid. Can import CommonJS packages?

rid with a specification at the end of the import. So you do import thing from thing and then the keyword assert in JavaScript without any compilations

files that you could import into JavaScript and even have them be, like, a transformed version or something. So, that's that's interesting. Yeah. Yeah. Even just, like, A couple of times I've just wanted to import text from a file.

angry with ESM, like, specifically would break if you tried to do it. Even, like, DoorDash had some issues for a while, so

love Love to get into stuff like that before it's ready. And,

the the most of my issues were resolved once the community caught up a little bit. Another neat thing is that in stage 3 is import assertions, generated variables or something, but I've never told me that as well.

were

import different types of files

Rid. And then also, needs to work.

which would allow you to Rid I don't see anything named that analyzes all of my requests.

and then an object, and that allows you to Assert what type of file this is. Is this a JSON file? And that would allow you to straight up import, like, a JSON module

With the eventual event eventuality of being able to do, like, things like assert web assembly or any different types of,

Which is really cool. You don't have to npm install something that's not part of Node as well. But Node does have a flag experimental network imports, which will allow you to rid. Import from a URL, but I wouldn't touch that until it's ready. I've I've gotten bitten way too many times on that kind of stuff. Even I haven't been touching that, and I

the sort of

a .mjs extension are going to be common JS. So There's a lot of a lot of people get up in arms in in a single pass and know exactly what dependencies are needed by your dependencies are needed by your dependencies. With Node. Js, Like, this is one thing I had. You can import something inside of a function. You could you could make a import,

Node thinks your project is CommonJS, because warp history and it pops up. It's like, are you trying to set the module?

there are kind of a a couple different ways to go about it. By default, no one's downloading your source maps unless you pop up a dev tools

by putting type of module in your package. JSON. And I do that so much. I kind of wish it was part of the npm init In ESM, you may not require JSON files. Rid. So the the fix for that is these import assertions. It's not fully supported everywhere yet, And then you have to you have to, like, use the the node read file API.

So if you have an existing project, import assertion the other day in another project. I needed to log the package. Json name and version. I was working on like a MPX script and I needed to it's a lot of work with very little benefit to it. So rid there are a couple benefits to it. So let's talk about what they are, but it's not gonna be there's nothing amazing. Rid To to the point where a lot of people think, like, maybe ESM was a mistake, Actually, the reason why I fell back is because I needed an ESLint plug in to support node APIs?

and therefore, dot JS files are in the differences between the two.

the ugliness And and what Century will do is it will say, okay. Like, you fix rid this. It will it will tell you in which commit you fix it to or you can pin it to a specific version.

You can flip that

But

.js files are ESM before you can do do the next thing. That's actually a good question I had.

I only do it because I have it in my like, interpolate it into the string. You can't do that with with the SM because that's not static.

Shortcut to that is you can run npm pkg set type equals module, and that will update your package JSON. That feels like more work than just Going into the package. Js and change again.

for modules for common JS.

Assumed to be CommonJS.

could be either. It could be depending on if you've set that type of module.

And I've come to think like, okay, maybe this isn't such a bad idea because of how the interop

thing where it would ask you.

of the new file extensions. So there's there's 2 new file extensions. Dotmjs I have no idea if maps are

do not enter. And then in, like, small letters, it says, or do.

what did I do? No, I didn't do that. Rid I sorry. Sorry. I had a little bit of TypeScript in the repo already,

do not What can I do to just get moving at the end of this? Yeah. Did you find it? Or No. I'm still looking.

adding TypeScript into the mix makes things But eventually, that will be there.

somewhat complicated. But also TypeScript makes things Somewhat easier to to actually make this transition.

90% of the app wasn't TypeScript, you could just say allow JS, rid.

and then the move over

and it's still goodbye. You could still compile it. Just no problem. Yeah. Do you ever see that Simpsons meme that's like, So to lines of code.

Types in TypeScript. Just the fact of, you know, you you get some niceties for free essentially from TypeScript handling the or they, I mean, I had ES Bill doing the compiling, but your TS config handling a lot of, settings that you might have to help and assist in that area. Yeah. Yeah, I actually,

file extensions and whatnot. And then on top of that, we're rid. We're not going to talk too much about TypeScript, but

there was nothing wrong with CommonJS. The reason We're annoyed with CommonJS right now is because we have all of this interop that we have to do between the module formats.

it's kind of complicated. You hit. There's a whole bunch of gotchas Transformed every single require and export and module that exports

Yeah. That's the that's the TypeScript with,

And that that's what I wanted to do. I wanted to just be rid of all the common JS. So, is logging.

I'm just a sign There's something. It's like like, I can't enforce it. I'm just a sign. I'm just gonna say it. Yeah.

I would say it makes it easier overall.

Turn your head to all the errors, Some of my modules I will.

CommonJS

people, myself included, say, alright, it's time to to flip this sucker over. For me, for rather than having to do the dance Where I was like some ESM and some common JS at all time. I said, you know what? I'm just gonna go YOLO, go for the whole thing.

I flipped Type A Module on, What else? A lot why else It must be. It must be a string. Yeah. I'll find it eventually here. Let's talk about actually making your project ESM.

it must be in a sync function. There's no top level away. Then you start getting in a world to hurt.

rid. Better use case for a queue. Right now, I just kinda fired off into queue. Yeah. Yeah. And I was like, maybe I need a queue. It is probably a better case for a queue. Yeah. Toss them into a queue, And then that queue can if it fails, then it can retry.

Yeah. Yeah. But then you just that that's the world where you get, like, here's the The good, better, best kind of solution, right? Yeah. I was sitting there thinking like,

middleware in SvelteKit

And then, like, it's never been an issue before, ever rid. In the like 8 years I've been running it, but I'm thinking, oh, maybe it should be in a queue. Like you said, the one day that Using import export and your your other files that are having

How do you log? Where do you log and .cjs

Mhmm. And that's a bit of an issue. I have emails sent to me, like, Custom alerts outside of Century that are like,

Rid. I send them saying, like, what do you log? rid. I just moved over my entire platform as, I'm I'm sort of I'll talk about it in a second, but, I think it's a good good time to talk about this and sort of go through it because it's Unfortunately, not very easy

things that I do. I send in send them an email with the product.

Yeah. Just so I can yeah. Just some extra alarms there. That that's a good case. I actually have a a card for a logging show, which is it's different than Error tracking and whatnot, but In ESM, and they're not totally the same. We'll talk about that, but that gets you a lot of the way there. And that was nice. I didn't have to fuss with any fancy names. There's no, like, renames in my history.

There's some newsletter markings that happen if they're in there that say they had bought something.

And all of those things. I don't wait for any of those things to come back because any one of those things But yeah, it's kind of annoying that you have to do that every single time. So when you flip it, now it thinks that your

So if the request is is is really fast, It's a rocket ship. If it's kind of fast, it's a bunny. If it's slow, it's a turtle. And ever it's just like in my console while I'm just browsing the site, I could just see. And it has what type of request, what path it was to. And it's just, like, at a glance, I could see, oh, I'm in turtle time right now. These requests to this page are all slow for some reason. Let me take a look.

hey. This thing that's not supposed to be happening is happening just in case, you know? With Java. Allow JavaScript. Yeah.

It can Mhmm.

rid. Could that could fail or take a longer time? your nodemodules folder or from a local file.

a notification to my phone that someone bought something. I add them,

I'm just assuming all of this stuff will work. The only the only one I'm really waiting for is like the credit card charge.

Rid That's great. Okay. We'll we'll put that on the books. I think that's a good show, without having to have an asynchronous function. So Previously, what people would do is they would have a function Oh, that's good.

development verse production logging. I have in I wrote this, like, really nice little handy,

the database is not able to connect, you know, then there's a charge without a database.

I dude, dude, this is oh, this is the source map.

like the actual error happened in a compiled version, but it wants to show you your source code.

Okay. Okay. Yeah. That that makes way more sense. I was wondering how they did that. That makes a lot of sense. I like that. So but can you explain to me what's up with the, semi colons in the import map regardless? rid. 30,000 or century is trying to Alright. Let's talk about why ESM. Like, what's the benefit? And And quite honestly, Welcome to Syntax, the podcast with the tastiest web development treats out there. We've got a good one for you today. We're going to talk about Yeah, there's gotta be Some interesting like thing about like how many semicolons

Rid. But I don't even I've never actually looked into that. Like why? I'm gonna tweet this out because I think this is fascinating.

What the heck this is, Yeah, you ignore the fact that you have to be writing to address

is how many lines or something. And like it doesn't necessarily matter that it's 10,000 semicolons because

Yeah. That's that. Honestly, that's Probably the single biggest benefit that I had CJIS syntax in my code base from the get go is that I didn't have to change a single import statement, and they were already import statements, and it just worked. So it was more or less making sure the modules are all supported as is. By the way, I did find the MJML

But plus, like, ready. Waiting for the Sentry emails to come in or like refreshing the dashboard for things to pop up. And rid. Create it or you're like, All right, well, all new modules going forward are going to be ESM.

figure out where you're cannot import ESM packages

It's all just simply Eventually you'll be able to import from a URL that is what Deno and BUND support.

The the I'll I'll show you this screenshot here. I'm very confused at what's going on in here, and I would actually love to figure out what

to avoiding

Rid. Yeah. I'm very confused.

Rid. Yeah.

semicolons?

It's it's way smarter. Okay. Way's way smarter here. The chunk

and references And we're at a spot now where A lot of the big module authors, all of Sindre's stuff, all of the the the whole MDX ecosystem, it's built on Remark. All the Remark of the only. I use Facebook. Yeah. A lot of big authors are saying, you know what? ESM only. And that is forcing a lot of, rid

semicolons.

of I have my chunks.

Alright. Let's talk about converting to ESM. So I talked about the first thing I did was the code mod syntax.

And I don't know if you've ever looked at these chunks files before, but A big chunk fan.

Yes. I've never taken the time to look at these. Not your source map?

What? there's something about pointers

Rid it's a dot net. No. You're right. Okay. Okay. So this isn't the chunk file. This is the source map, which actually makes way more sense. Sorry. I did a find here, and I usually have maps excluded from that. So actually doing here? This is within one of my chunk files, and I haven't really pawed through these things before. But it it's it's maybe, like, about a 1,000,

stuff, and I'm seeing it as a string inside of one of the chunks. Just a big, long string inside of chunks.

What almost looks like DNA sequences, where it's a c d d c a e which I would imagine are just, you know,

This is one of the the Vite build chunk files. And before that, it's like a string

I tested it and everything. But you never know when you do the first deployed, especially when you are Synchronously,

Let's ready. Get on into it. Maybe we should just talk real quick about I still I just turned on allow JS. We'll talk about this in the show where we convert entirely to TypeScript as well. But basically I did use TypeScript as the The bundler for the entire thing, which was kinda nice. Even though

And then if that same issue comes back, rid. It will tell you, hey. Like, you said you fixed it. You said you resolved this, but it's now coming back and here's the information about it. So, And if you have a common JS project and you need to yes. Okay. Imagine you're shipping the, just straight up logs. There's a lot of systems for that. And I was thinking about like maybe we should do a show full go, Node. Js was initially released May 27, So

luckily only 1 like 1 minor thing had popped up. And I was and I ended up having to rid. Fall back to just, node read file APIs, rid. And everything will will start to work.

fantastic. I I love it. I have 0 issues on my node back end right now, and it gives you a, inside of a module you can rip through the entire But back when it was just CommonJS,

a bunch of robots dancing around. So a big fan of that. Yeah. Check it out. Century. I owe. Use the coupon code PastyTreat. Gives you 2 months for free. Thank you, Sentry, for sponsoring. All right.

to ESM, in? Yeah. How long do you keep the thing that I would be expecting it to name. The behavior is similar to Webpack's file loader. The difference is that Import can be used using absolute or public paths.

I immediately made that into a GitHub issue, There's lots of different rid. Require or import tree,

very happy about that. But it was But I was just like, I'm not doing this. I don't feel like adding this another plug in for that. I'm just going to read file and move along with my life. Yeah, there there's an element of that to all of this stuff. It's like,

and then, it dumped all the information into the GitHub issue. I could go in, I fix And then you in century, you mark it as resolved, which basically is saying, like, get out of here and don't come back. I hope you don't come back. I hope you don't come back is really what I'm saying. Yeah. Yeah.

and then I just sat there

So after I converted my entire application You don't need to do anything other than just name it .mjs

And I just rid. I think it's at a point now where things are starting to break if you're not in ESM.

Sentry is the error and exception tracking platform. Actually,

this is the perfect I got the perfect ad read for this one, Scott.

And to do this type of stuff. We're sponsored today by Sentry.

Import style syntax even though it was an ESM as its default means of importing

Meteor had the

you are on what's it? Why? Media. You are a meteor. So you you've been on ESM for a while. Right? Well, so I do. Yeah. I guess it's it's not it's not correct to say I was on ESM with Meteor, but, Modules? I don't ever remember. And and I was very early in Node. I don't ever remember not having a module system. Yeah. I don't either. I remember going to, like, a meetup that was, like, rid. Very early on, and, like, it took an hour just to get an express server up and running for everybody and then deploying to Heroku.

I know you have been on ESM for a lot longer because because of

from the start.

you can require JSON files. No problem.

I

Scrolling through them.

The way that you require your in CommonJS,

I I built my stuff.

linting those types of assertions because it's a new syntax.

There's a lot of them.

mime types.

unfortunately.

You know, we do this in one of our our JavaScript courses

a script tag. And if you put type a module on it, you can you can import stuff from from URLs, but you can also use top level await

Import I import like a list of stuff from GitHub when I hit it and the 1st time it's run rid.

We say, hey. We're gonna be just writing a script tag here. And in the script tag, we're importing things. And there's just something really magical about that Yeah. To be able to just straight up use import syntax

In HTML. Yeah. I I remember being shocked the 1st time I did that. Wait. Like, you're allowed to do this? Holy cow. Yeah. It it's awesome. Even like, I do a lot of demos And often I'll do

inside of a script. Top level of weight. Yeah. Yeah. That's that's the next world. Yeah. ESM allows you to have a top level away. And what that means is you can await things

where

export something from that module that is based on the asynchronous data, like you need to load a file in ready. 1st and then export some data from that file. It's not really possible. So having top level await inside of modules is super, super handy. Even like, That makes sense because Webpack's file loader, you like tell that how to handle different types of

rid. Things were good. But then also people were not using things in the browser. So let's talk about the benefits of of moving to ESM. First of all, It's a spec. Common JS is it is a spec, but it's not like a blessed one by the people who create JavaScript, TC39.

figure out what the current version was.

Oh, that's a great question. Haven't looked.

Or it just puts it in a string and makes a JavaScript file that exports that string. I got to imagine that's it. Yeah. I mean, probably I could look at my chunks.

Well, let me tell you, if you're on Veet, which gotta love Veet. Veet has the best little helper for this, and it's the raw imports.

For your prem? Rid. Yeah. I did this for our m j m l templates even. Oh, that yeah. That that's the perfect use case for it. And then you don't have to do the read file type of thing. Like, I want what does that compile to? Probably

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

CommonJS

moving from CJS to my database.

to the closest equivalent

rid.

in That's what Gzip does, right? Sending 1 semicolon or 10,000 semicolons should be the same size. Or like a broad lay compression as well. Yeah. Yeah. Plus, like, oh, maybe that's what yeah.

and then I ran what's called a code mod on my entire codebase. Oh geez, yeah. And it changing the way that you run your application. So basically I deployed that sucker, And our own experiences.