Skip to content
This repository was archived by the owner on Jan 25, 2022. It is now read-only.

importModule function in README does not work #61

Open
hax opened this issue Apr 11, 2018 · 1 comment
Open

importModule function in README does not work #61

hax opened this issue Apr 11, 2018 · 1 comment

Comments

@hax
Copy link
Member

hax commented Apr 11, 2018

https://github.com/tc39/proposal-dynamic-import#using-host-specific-mechanisms

function importModule(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    const tempGlobal = "__tempModuleLoadingVariable" + Math.random().toString(32).substring(2);
    script.type = "module";
    script.textContent = `import * as m from "${url}"; window.${tempGlobal} = m;`;

    script.onload = () => {
      resolve(window[tempGlobal]);
      delete window[tempGlobal];
      script.remove();
    };

    script.onerror = () => {
      reject(new Error("Failed to load module script with URL " + url));
      delete window[tempGlobal];
      script.remove();
    };

    document.documentElement.appendChild(script);
  });
}

This importModule function does not work, because a inline script without src attribute will never trigger load event.

@ephys
Copy link

ephys commented Jun 19, 2018

Version that does not use onload:

function importModule(url) {
  // escape characters that are used to delimit the module URL.
  // this way the following module works: 'data:text/javascript,console.log("hello")'
  url = url.replace(/\\/g, '\\\\').replace(/"/g, '\\"');

  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    const tempGlobal = "__tempModuleLoadingVariable" + Math.random().toString(32).substring(2);

    function cleanup() {
      delete window[tempGlobal]; 
      script.remove();
    }

    window[tempGlobal] = function (module) {
      cleanup();
      resolve(module);
    };

    script.type = "module";
    script.textContent = `import * as m from "${url}"; window.${tempGlobal}(m);`;

    script.onerror = () => {
      reject(new Error("Failed to load module script with URL " + url));
      cleanup();
    };

    document.documentElement.appendChild(script);
  });
}

Note that the returned promise does not reject when the module identifier is not valid (eg importModule('')), couldn't get that to work (it stays stuck in a pending state)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants