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";
2 answers
solution1
0 2022-12-27 21:01:27
@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>
solution2
0 2023-01-20 15:22:35
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.