es-module-shims script tag inserted above import map by htmlInject()

zachsa commented 2 years ago

Hi Guy,

Using the es-module-shims tag I'm finding that in some cases it doesn't kick in correctly - specifically on Firefox. I get an error:

Uncaught TypeError: Error resolving module specifier “react/jsx-runtime”. Relative module specifiers must start with “./”, “../” or “/”.

From what I understand, this is because the generator outputs the import map script below the es-module-shim script in the HTML head, instead of the other way around:

<!-- Generated by @jspm/generator - https://github.com/jspm/generator -->
<script async src="[https://ga.jspm.io/npm:es-module-shims@1.5.13/dist/es-module-shims.js](view-source:https://ga.jspm.io/npm:es-module-shims@1.5.13/dist/es-module-shims.js)" crossorigin="anonymous"></script>
<script type="importmap">
{
  "scopes": {
    "../": {
      "@apollo/client": "https://ga.jspm.io/npm:@apollo/client@3.6.9/index.js",
      "@emotion/cache": "https://ga.jspm.io/npm:@emotion/cache@11.10.1/dist/emotion-cache.browser.esm.js",
      "@emotion/react": "https://ga.jspm.io/npm:@emotion/react@11.10.0/dist/emotion-react.browser.esm.js",
      "@mdi/js": "https://ga.jspm.io ...

guybedford commented 2 years ago

From what I understand, this is because the generator outputs the import map script below the es-module-shim script in the HTML head, instead of the other way around

This is actually a bug in ES Module Shims, and was supposed to have been fixed in the latest version. Can you share a replication of the case that isn't working?

guybedford commented 2 years ago

This is now resolved in es-module-shims@1.5.14.

jspm / generator

es-module-shims script tag inserted above import map by htmlInject() #160