Dynamically Loading A Module That Is Not In A Script Tag With Type="module"?

Is it possible to use import without a script tag already in place for said module? My problem is that I want to load modules dynamically based on a config file, for example : Fold

Solution 1:

Yes you can, as long as your loader script is marked as module

<scripttype="module">const moduleSpecifier = './myModule.mjs';
  import(moduleSpecifier)
    .then((module) => {
      // do something
    });
</script>

Although, in your case, a simple forEach may not be enough. You may need Promise.all or similar if you want to wait for all the modules to load from your config.

const modules = config.modules.map(moduleName =>import(`modules/${moduleName}`))

Promise.all(modules)
  .then(modules => {
    // modules is an array of all your loaded modulesconsole.log('All modules loaded.');
  )}

Further reading:

• https://jakearchibald.com/2017/es-modules-in-browsers/
• https://developers.google.com/web/updates/2017/11/dynamic-import

Solution 2:

Edit!Dynamic import has landed in Firefox 67+.

  (async () => {
    await import('./synth/BubbleSynth.js')
  })()

https://caniuse.com/#feat=es6-module-dynamic-import

---

Old answer:

To import further modules after DOM load, one not so clean but working way can be to create a new caller script of type module.

/* Example *//* Loading BubbleSynth.js from «synth» folder*/let dynamicModules = document.createElement("script")
dynamicModules.type = "module"
dynamicModules.innerText = "import * as bsynth from '../synth/BubbleSynth.js'"/* One module script already exist. eq: «main.js», append after it */document.querySelector("script[type='module']").parentElement.appendChild(dynamicModules)

Destroying the module caller script does not harm the past calls:

document.querySelectorAll("script[type='module']")[1].outerHTML = ""// *BubbleSynth* is still in memory and is running

But appending a new module call to that script does not works. A new caller module script must be created.

As a function:

functiondynModule(me){
  let dyn = document.createElement("script")
  dyn.type = "module"
  dyn.innerText = `import * as ${me} from '../synth/${me}.js'`document.querySelector("script[type='module']").parentElement.appendChild(dyn)
  document.querySelectorAll("script[type='module']")[1].outerHTML = ""
}

dynModule("BubbleSynth")