What is <script type="importmap"> and why do I suddenly need it for my code to work?

<script type="importmap">
    {
        "imports": {
            "three": ".module.js"
        }
    }
</script>

Before, I would just write this and Three.js would work, but now this part doesn't work without the importmap:

<script type="module"> import * as THREE from ".module.js";

What is <script type="importmap"> and why do I suddenly need it for my code to work?

<script type="importmap">
    {
        "imports": {
            "three": "https://example.com/3dstuff/three.module.js"
        }
    }
</script>

Before, I would just write this and Three.js would work, but now this part doesn't work without the importmap:

<script type="module"> import * as THREE from "https://example.com/3dstuff/three.module.js";

• javascript
• import

2 Answers 2

The importmap in your code is essentially setting up a shortcut from the string "three" to the actual .js file URL. What you should be writing in your <script type="module"> is import * as three from "three"; and it will automatically resolve to the URL due to the importmap you defined before.

From https://github.com/WICG/import-maps:

By supplying the browser with the following import map

<script type="importmap">
{
  "imports": {
    "moment": "/node_modules/moment/src/moment.js",
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}
</script>

the above would act as if you had written

import moment from "/node_modules/moment/src/moment.js";
import { partition } from "/node_modules/lodash-es/lodash.js";

Import maps will allow you to both import external code into your project without a build tool and it will only load the code when it is needed at runtime. Import maps won’t completely replace build tools that perform many other valuable actions like building style sheets and handling images, but they will allow you to bootstrap new JavaScript applications quickly and easily using only the native browser functionality