In this video I’ll be showing you how to use native JavaScript Modules with the import and export syntax in JavaScript – this works on major browsers such as Chrome, Firefox, Safari and Edge.
Modules allow you to separate your code into individual chunks or components, allowing for easier maintainability and better file organization.
Support me on Patreon:
https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Follow me on Twitter @dcodeyt!
If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!
Original source
Jason
Great tutorials man! Great explanations, great examples, great everything. Thank you!
Best choice
Great bro. Great explanation. Keep it up.
Chill Chill Not Chill
All I wanted to do is import a simple model into a three.js context from blender. I think Ill just blow my fucking brains out instead..
Md Risul Amin
Just I want to say Thank You for this informative video. Thank You again!
Lukman Sanni
You did excellent. I was only able to understand js modules after watching your video. 🙏🏽
TroenderTass
Does this use a modular system identical to that of webpack?
Jow Sad
hi my browser says " index.html:1 Access to script at 'file:///C:/Users/User/Desktop/Learning/js/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. " and I cannot use modules like you teach. any help?
matt81093
I'm curious if a 'pass-through', as it were, can utilize the pseudo imported objects. I assume they can, but thought I'd pose the question.
Ayntak
Awesome, got it! Thank you 🙂
Jcorb
How do you bring up "Modules" on the left? I can't see it when I have my .js and .html files open in Visual Studio Code. I just see "Open Editors".
تقنيتي Taknity
u r amazing
Russell Driver
How would we import an npm package if using an npm init setup? Import doesnt work in that scenario, I have tried afew and used for example: import axios from '../node_modules/axios/dist/axios.js'; and get a console error saying it does not provide an export named 'default'.
Davidp_
silly question 😅.
What is that theme? and what font do you use?
Nikhil Mathew
Simple and awesome excellent video
iamreg1965
Nice video. Short and to the point.
iamreg1965
Go Vanilla, you won't regret it.
derek chan
Hi there, I've tried it but I am getting an error – "SyntaxError: Cannot use import statement outside a module". Can anyone help?
Wael Chorfan
Thanks for type ='module' ;that tick FUCKS !
salv236
i tried to use this feature i get a message "Access to script at [path to root js file] from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."
Sparsh Gupta
YOU DESERVE A MILLION + SUBSCRIBERS SIMPLE BUT GREAT EXPLANATION IN A SHORT VIDEO…AMAZING
PgTvEspañol
Thx so much for making this video. Finally I'm able to understand it 😀
Sifat Imtiaz
10/10. Superb!
Palundrium
At 1:03 you're missing your root HTML element.
Matthew Leroe
What does, "Syntax Error: Cannot use import statement outside a module," mean? I found this: https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import, but just want to do this in vanilla.js
Lightning Champion
Finally helped me understand JavaScript modules. Thanks 😊
Nonchalant 84
Great tutorial. Thank you!
Divyansh agarwal
Im having one question what if we want to use the water fn from helper .js in utils.js…So for that we have to import fn water in util.js right? or by simple exporting the fn water in util.js will solve the problem..
please clarify the doubt im bit confused now
Anis Dzed
Very helpful, thanks a lot
Joe Rivera
i appreciate this video man. i learned quite a bit. but what if i want to use the javascript from the 'main.js' on my actual HTML page. Im using the import/export method to export a Player Class into a 'main.js' file and then instatiating a player object into the main.js file. i can console.log player stats and stuff but i cant document.write player stats in the main.html page. it says player is undefined.
Kirill Baryba
Hey! Is it safe if you use modules if babel transpiler is not connected ?