Import Map on Firefox v107 with `es-module-shims` polyfill is not working for dynamic import答案

【问题标题】：Import Map on Firefox v107 with `es-module-shims` polyfill is not working for dynamic importImport Map on Firefox v107 with `es-module-shims` polyfill is not working for dynamic import
【发布时间】：2022-12-28 05:01:27
【问题描述】：

I'm using Import Maps on my website which (according to caniuse.com) aren't supported on Firefox v107 or the latest (non-TP) version of Safari. I thought that the es-module-shims polyfill library would add support, but it doesn't seem to be working.

I have code that works perfectly as soon as I enable Import Maps in about:config (or when I visit my page on Chrome), but the same code throws an error in the console on Firefox v107.

Am I using the polyfill incorrectly or doing something unsupported?

I have this code in the <head> of my page:

<script src="//unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
<script type="importmap">
    {
        "imports": {
            "three/examples/fonts/": "./node_modules/three/examples/fonts/",
            "three/examples/jsm/": "./node_modules/three/examples/jsm/",
            "three": "./node_modules/three/build/three.module.js"
        }
    }
</script>
<script type="module" defer src="index.js"></script>

In my index.js, I have a dynamic import:

if (location.pathname === "/" || location.pathname === "/index.html") {
    import("./module/hero.js");
}

At the top of my module/hero.js, I have a static import to Three.js:

import * as THREE from "three";

【问题讨论】：

Does it work when using importmap-shim as the script type rather than importmap? From what I can tell, that library is supposed to work either way, but it could be a bug in the shim.
@ZacAnger no, it doesn't change anything unfortunately

标签： three.js es6-modules import-maps esmodules

【解决方案1】：

@Arcanist is right: Use ES module shims in 'shim mode' with 'importmap-shim' and 'module-shim' instead of 'importmap' and 'module' respectively. ES module shims also needs to be loaded with the "async" attribute (see usage).

<script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1.6.2/dist/es-module-shims.min.js"></script>
<script type="importmap-shim">
    {
        "imports": {
            "three/examples/fonts/": "./node_modules/three/examples/fonts/",
            "three/examples/jsm/": "./node_modules/three/examples/jsm/",
            "three": "./node_modules/three/build/three.module.js"
        }
    }
</script>
<script type="module-shim" src="index.js"></script>

【讨论】：