guybedford/import-maps-extensions

Dynamic import maps not working if called asynchronously

DmitryBrus opened this issue · 2 comments

DmitryBrus commented

I noticed weird behavior with dynamic-imports-maps extra.

let say we have 2 modules: mod1 and mod2.

import map for the first one pre-registered in index.html

<head>
...
<script type="systemjs-importmap">{"imports":{"mod1":"/mod1/main.js"}}</script>
</head>

Import map for second added dynamically:

const script = document.createElement('script');
script.setAttribute('type', 'systemjs-importmap');
script.text = JSON.stringify({"imports": {"mod2": '/mod2/main.js'}});
document.head.appendChild(script);

this works good in straight sync flow:

System.import('mod1');

const script = document.createElement('script');
script.setAttribute('type', 'systemjs-importmap');
script.text = JSON.stringify({"imports": {"mod2": '/mod2/main.js'}});
document.head.appendChild(script);

System.import('mod2');

But.

if dynamic add and import occurs asynchronously (e.g. after call or simply with setTimeout delay - import fails:

System.import('mod1');

setTimeout(() => {
  const script = document.createElement('script');
  script.setAttribute('type', 'systemjs-importmap');
  script.text = JSON.stringify({"imports": {"mod2": '/mod2/main.js'}});
  document.head.appendChild(script);

  System.import('mod2');
}, 1000);

Unhandled Promise rejection: Unable to resolve bare specifier 'mod2'

if I wrap System.import('mod2') in setTimeout - import succeed, but it looks like workaround,

Does anybody have any ideas why import behaves like that?

I use SystemJS 6.4.3

DmitryBrus commented

Just payed attention that I'm not at systemjs repo, worth to copy it to systemjs?

guybedford commented

Let's track this in systemjs/systemjs#2305. This was just implemented in ES module shims with dom mutators so the same approach can apply to SystemJS.

You were right that the real issue is whether the spec for dynamic map updates as per this repo has a chance of going forward!