34
Vanilla JS - how to work with modules
I am reading You Don't Know Javascript and I want to really take time to practise what I have not worked on before. I was reading about
Modules and since I have never used them on a Vanilla JS project I wanted to see how it works (I always use it in React).I was following the MDN guide so I created a
script.js file and a module.jsfile. The HTML file had the usual <script src="script.js"></script> tag.My HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="but">Click me</button>
<div id="container"></div>
<script src="script.js"></script>
</body>
</html>My
script.js file:import { text } from "./module.js";
const target = document.getElementById("but");
const container = document.getElementById("container");
target.addEventListener("click", () => {
container.textContent = text;
});My
module.js file:const text = "Yay";
export { text };Well, I was getting an error:
Uncaught SyntaxError: Cannot use import statement outside a module. WTH, I thought.After a bit of research, I found the solution: you need to add
type=module in the script tag:<script type="module" src="script.js"></script>It is also explained here.