importmaps do not work inside imported modules

[eugene1g]

Hi,

When I import a module that loads another module (that is also defined in the importmap), the polyfill behavior is as if the sourcemap does not exist.

For example, I have an import map like this -

"imports": {
    "/a.js": "/a.1234.js",
    "/b.js": "/b.1234.js"
}

And when a.js tries to import "./b.js";, this works as expected in current Chrome, but will fails in current Firefox and Safari.

Minimal reproduction at https://glitch.com/edit/#!/hissing-humdrum-hyacinth?path=index.html%3A1%3A0

There are two related issues #199 and #168 but in my example, I'm following the main rule for the polyfil - that the first import should fail for the polyfill to take over module resolution - and it's still no finding my hashed filenames.

[guybedford]

So the polyfill guarantee is clearly defined as only polyfilling static module graphs that fail. Because you are using dynamic import and the module is otherwise succeeding in its static graph execution, the graph you are executing there is not being polyfilled by this project.

This is described in more detail in https://github.com/guybedford/es-module-shims#polyfill-mode-details.

You can achieve what you are after by using importShim instead of import, which will still defer to native dynamic import when possible.

[eugene1g]

In the main HTML code, I have (had) this definition -

  <script type="module">
    import { a } from "/a.js";
    document.getElementById("output").innerText = `The answer is ${a}`;
  </script>

To my (incomplete) knowledge of the module spec, this use-case is both 1) a static import (that is, I am not doing import("/a.js")), and 2) this module should fail in graph execution without import maps support because "/a.js" does not exist. Maybe my understanding is lacking, so I tried rewriting it like so -

  <script type="module">
    const { a } = await importShim("/a.js");
    document.getElementById("output").innerText = `The answer is ${a}`;
  </script>

This works as desired in the latest Chrome and Firefox, but in Safari I get SyntaxError: Unexpected identifier 'importShim'. Expected ';' after variable declaration.. Could you please see if my use of importShim is incorrect? I updated the reproduction example at https://glitch.com/edit/#!/hissing-humdrum-hyacinth?path=index.html%3A17%3A0 and it's testable via https://hissing-humdrum-hyacinth.glitch.me/

[guybedford]

Because in the case of a 404 an actual request is sent, this isn't on the polyfill "optimum path" and so isn't polyfilled. You don't really want to be sending an unnecessary request in production ideally, and the polyfill would have to wait a full RTT before it knows it needs to engage which would have a performance cost.

I guess an even stricter definition would be: The polyfill kicks in if there is a static link-time error - specifically either a syntax error or a resolution error. Fetch errors and runtime errors are not part of the polyfill path.

Per the documentation you should add async to ES module shims or even load it as a module itself.

[guybedford]

Would definitely be good to tackle these questions better in the docs, so thank you for your feedback here!

Let me know if adding async solves that Safari issue for you?

[guybedford]

Closing as import maps work equivalently to native here, so if it works natively it will work in the polyfill. ES Module Shims now better handles import map attachment to never hit cases like this anymore, although do note that multiple import maps and import maps with src attributes are not supported in polyfill mode per the documentation to match native.