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

Question

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. — Zac Anger, Nov 27 '22 at 05:43

score 0 · Answer 1 · answered Dec 27 '22 at 21:01

@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>

score 0 · Answer 2 · answered Jan 20 '23 at 15:22

The following I was able to have work with Safari 16, all modern browsers I tested as well as the OP's FF 107 -- https://codepen.io/btopro/pen/zYLpNpG?editors=1000

<script async src="https://unpkg.com/es-module-shims"></script>

<script type="importmap">
  {
    "imports": {
      "lit": "https://unpkg.com/lit",
      "lit-html": "https://unpkg.com/lit-html",
      "lit-html/": "https://unpkg.com/lit-html/",
      "lit-element/": "https://unpkg.com/lit-element/",
      "@lit/": "https://unpkg.com/@lit/"
    } 
  }
</script>
<script type="module">
import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);
</script>
<simple-greeting name="World"></simple-greeting>
<simple-greeting name="World"></simple-greeting>

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

2 Answers2