ES Modules in NodeJS and the Browser

Рет қаралды 7,099

2 жыл бұрын

This tutorial explains how you can use ES Modules in either NodeJS or in the Browser along with some of the gotchas and key points that you need to be aware of.

Пікірлер: 23

@ambrozykleks626 2 жыл бұрын

this channel is one of the best source of JS on the internet. I love the way prof is speaking english. Learning JS and beautiful english at the same time. Brilliant :)

@tahasoft1 2 жыл бұрын

In package.json just add "type": "module" then no need to rename the files to mjs

@RogerThat902 2 жыл бұрын

did not know that. That's a great tip. Thanks.

@damo190 2 жыл бұрын

Wao Steve, your are the best teacher. 🙏👏👏. Since many months I was searching for this topic on how to use import in nodejs. 🤩

@satya4866 2 жыл бұрын

Awesome topic you selected here. Thank you very much.

@nicopicco 2 жыл бұрын

Thanks. That explains why we type certain things when importing stuff from React or React DOM or even material UI.

@metanevis 2 жыл бұрын

thanks a lot. it helps me . import/export or how files work together is question of many beginners like me

@mackenmd 2 жыл бұрын

Great video, thank you very much! I really like the thoroughness and pacing of your videos and hope your channel grows in subscriber count as the secret gets out. I just attempted to get an electron app working with ES6 modules and failed. I used both the package.json settings method as well as the changing the extension to mjs method and nothing worked. It was super frustrating as I really want to share some code back-and-forth between websites and electron apps. It would be interesting to see if you could get a "hello world" electron app working with es6 modules. Thanks in advance if you decide to tinker with that and share your findings.

@firedforfighting 2 жыл бұрын

you could use which ever module type you like commonjs or esm for your app and just use webpack to bundle it into a UMD format and it will automatically choose the appropriate one..I use this recently on a small project

@mackenmd 2 жыл бұрын

@@firedforfighting Thank you for taking the time to give me advice-I will try this.

@suryapratap3622 20 күн бұрын

thanks you for explanation

@yinonelbaz5309 2 жыл бұрын

Thank you so much I got smart

@mykalimba 2 жыл бұрын

I'd be interested to see a sensible scheme for how to organize the shared scripts for a project (basic node/express/mongodb). Maybe that's outside the scope of this particular video, but it seems like a logical next step? My project's back-end-only scripts exist in top level folders named "controllers", "models", "routes", etc. The project front-end is in a top-level "public" folder, and its scripts are in "public/js". I think if I want to share scripts between the back- and front-end, they would have to go somewhere in the "public" folder (otherwise it's impossible for the front-end to see them). Maybe in a "public/shared" folder, but that feels a bit messy?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Folder structure will vary a lot depending on the project. There is no single project structure that will work for everything. The important thing is having a structure that you plan out, document, and then stick to. Not sure what scripts you would want to share between client and server. Code should either be for the server or the client. You don't want to send your back end controllers or routing files to the client. Any client side scripts that have to do with the DOM are not needed on the server.

@satya4866 2 жыл бұрын

Can you make a video about commonjs and then explain the difference between the two types of modules, please and tha k you.

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

You can add tutorial requests in the comments here - kzfaq.info/get/bejne/gqmVrcSpl9uyY5c.html and vote for requests you support.

@ballonura 2 жыл бұрын

Thx

@SirusStarTV 2 жыл бұрын

Likes one oh one

@marie-elizeventer7080 Жыл бұрын

Thanks

@marie-elizeventer7080 Жыл бұрын

I was completely in the dark with module imports not working in the browser and in node, but this made it all so clear. Thanks Steve!

@cgarafulic 2 жыл бұрын

Hello Steve, again a great tutorial as always. Something that happened in the browser is that after installing and importing node-fethc, the browser report an error "Uncaught TypeError: Failed to resolve module specifier "node-fetch". Relative references must start with either "/", "./", or "../".". Why is that happening?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

node-fetch is a library meant to be used with Node (on the server-side) not in the browser. In the browser you can't load things directly from a node_modules folder. You have to give the full path.