<script type='module'>: ES modules in the browser

Two kinds of <script>

<script src="app.js"></script>                <!-- classic script -->
<script type="module" src="app.js"></script>  <!-- ES module -->

Browsers have shipped ES modules since 2017. type="module" flips three things:

1. import / export work — without it, import is a syntax error.
2. Strict mode is on — implicit globals throw, this at top level is undefined.
3. Deferred by default — module scripts wait until the DOM is parsed before running, like classic defer. No more "put the script at the end of body."

The smallest possible example

<script type="module">
  console.log("running as a module");
  // import { something } from "./other.js";   // works here, would error in a classic script
</script>

Same syntax inline OR in an external file. The type="module" attribute is what matters.

What you give up with type="module"

<script>alert(typeof window === "object")</script>          <!-- "object" -->
<script type="module">alert(typeof window === "object")</script>  <!-- "object" (window is still global) -->

The window is still global. What you lose:

• `this` at top level — in classic scripts this is window; in modules it's undefined. Production code rarely relies on this anyway.
• Implicit globals — x = 5 without let throws in module strict mode. Good.
• CORS — modules loaded from a file:// URL won't work; you need an HTTP server.