Shims script & import map ordering

[bobosola]

Hi, the readme says "include ES Module Shims with a async attribute on the script, then include an import map and module scripts normally". But I notice that your (excellent, super helpful) JSPM generator shows the import map first followed by the ES Module Shims script. Both ways work, but should one order be preferred over the other? Thanks.

[guybedford]

Which comes first doesn't matter since es-module-shims will pick up what is available when it is loaded, and then as well as on domready and import too.

The theoretical benefit of including the import map after es-module-shims is if you have a very large import map, the HTML parser doesn't need to seek through it before sending the request for es-module-shims itself.

[bobosola]

Sorry for the late reply but I have just discovered that putting the es-module-shims script before the import map in the head section on my site pops up the following console errors:

• MacOS Firefox 125.0: Import maps are not allowed after a module load or preload has started.
• MacOS Chrome Version 124.0.6367.119: An import map is added after module script load was triggered.

However in both cases (on my site at least) the code continues to work as expected. If I switch them and place the import map before the es-module-shims script, then the error messages no longer show up.

Interestingly, Chrome's behaviour changes depending on the order: with the import map first, it serves the sites files as expected, natively reading the import map. But with the import map second, I can see all the generated es-module-shims blobs suddenly appearing. So presumably having the import map in second position is breaking Chrome's ability to handle import maps natively, and es-module-shims then steps in and provides a fix?

The ordering seems to have no effect in Firefox other than removing the error message when the import maps is placed first. For info, Safari 17.4.1 has no such console errors and seems not to care about the order; it just serves the site files with no shim blobs appearing either way.

It seems therefore that the ordering does matter in some cases, so a safer default might be to suggest always placing the import map in the head section before es-module-shim (or indeed any other script).

[guybedford]

es-module-shims should ideally be loaded as a script and not a module itself. But with the async attribute, which comes first does not matter that much.