loadjs: Success/Error callbacks never called when the script element has the "nomodule" attribute.

Refs: https://www.drupal.org/project/drupal/issues/3334704

If a script element to be injected has the “nomodule” attribute (for example added in a before) then the browser will not fire any onload, onerror or onbeforeload event when the script is added to the page.

As a result, the function wrapping the decrement of numWaiting will not be called and the callback chain will be stuck.

Here’s a tiny example with the issue (the success and error callbacks are never called):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test Load JS</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/loadjs@4.2.0/dist/loadjs.min.js"></script>
  <script>
    loadjs(['https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2.4.8/dist/css-vars-ponyfill.min.js'], 'css-vars-ponyfill', {
      async: false,
      before: function(path, scriptEl) {
        console.log(path);
        scriptEl.setAttribute('nomodule', '');
      }
    });

    loadjs.ready('css-vars-ponyfill', {
      success: function() {
        console.log('success');
      },
      error: function(depsNotFound) {
        console.log(depsNotFound);
      },
    });
  </script>
</body>
</html>

Modern browsers all support the nomodule attribute so maybe the code could check if the script element has the attribute and skip loading it unless it’s < IE11?

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 15 (8 by maintainers)

Commits related to this issue

Most upvoted comments

Thanks! I’ll take a look to see which one requires the least code changes.