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
30 responses to “JavaScript Modules with Import/Export Syntax (ES6) – JavaScript Tutorial”
Great tutorials man! Great explanations, great examples, great everything. Thank you!
Great bro. Great explanation. Keep it up.
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..
Just I want to say Thank You for this informative video. Thank You again!
You did excellent. I was only able to understand js modules after watching your video. 🙏🏽
Does this use a modular system identical to that of webpack?
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?
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.
Awesome, got it! Thank you 🙂
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".
u r amazing
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'.
silly question 😅.
What is that theme? and what font do you use?
Simple and awesome excellent video
Nice video. Short and to the point.
Go Vanilla, you won't regret it.
Hi there, I've tried it but I am getting an error – "SyntaxError: Cannot use import statement outside a module". Can anyone help?
Thanks for type ='module' ;that tick FUCKS !
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."
YOU DESERVE A MILLION + SUBSCRIBERS SIMPLE BUT GREAT EXPLANATION IN A SHORT VIDEO…AMAZING
Thx so much for making this video. Finally I'm able to understand it 😀
10/10. Superb!
At 1:03 you're missing your root HTML element.
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
Finally helped me understand JavaScript modules. Thanks 😊
Great tutorial. Thank you!
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
Very helpful, thanks a lot
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.
Hey! Is it safe if you use modules if babel transpiler is not connected ?