DOMContentLoaded twice

Questions
1

It appears that the importmap (es-module) shim causes document.DOMContentLoaded to be called twice. Why?

For example, the following code will output twice to the console log. Not the first page load but on every subsequent reload.

<!DOCTYPE html>
<html>
  <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
  <script type="module">
    document.addEventListener('DOMContentLoaded', ()=>{ console.log('DOMContentLoaded'); });
  </script>
</html>

DOMContentLoaded is only fired once if:

  • The importmap shim is removed (Chrome already supports importmap but Firefox doesn’t)
  • add “{once:true}” as the second parameter to addEventListener
  • use window.addEventListener instead of document.addEventListener
  • the page is loaded for the first time (fires twice on reload)

So there are work arounds, and this isn’t specifically a three.js issue, but after spending an afternoon tracking this down I’d like to understand why it fires twice.

2

Probably best to ask this question here:

3

Suggestion — you may want to just use <script defer ... instead of DOMContentLoaded:

1 Like