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.
Top comments (0)