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.
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 :)
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.
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
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?
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.
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?
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.
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 :)
In package.json just add "type": "module" then no need to rename the files to mjs
did not know that. That's a great tip. Thanks.
Wao Steve, your are the best teacher. 🙏👏👏. Since many months I was searching for this topic on how to use import in nodejs. 🤩
Awesome topic you selected here.
Thank you very much.
Thanks. That explains why we type certain things when importing stuff from React or React DOM or even material UI.
thanks a lot. it helps me . import/export or how files work together is question of many beginners like me
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.
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
@@firedforfighting Thank you for taking the time to give me advice-I will try this.
thanks you for explanation
Thx
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?
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.
Thank you so much I got smart
Can you make a video about commonjs and then explain the difference between the two types of modules, please and tha k you.
You can add tutorial requests in the comments here - ruclips.net/video/LCezax2uN3c/видео.html and vote for requests you support.
Thanks
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!
Likes one oh one
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?
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.