Why doesn't evenlistener fire?

Questions
1

Following code:

<head>
  <title>Sandbox</title>

</head>

<body>

  <!-- Import maps polyfill -->
  <!-- Remove this when import maps will be widely supported -->
  <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

  <script type="importmap">
    {
      "imports": {
        "three": "./jsm/three.module.js"
      }
    }
  </script>

  <script type="module">
    
    window.addEventListener('load', e => {
      console.info('here');
    });

    import * as THREE from 'three';

  </script>


</body>

Produces the annoying ‘Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “…/” or “/”. test2.html:26:27’ error and will not fire the window=> load event. Why?

2

what does ./jsm/three.module.js return?
Check the network tab in your browser developer tools.
Normally you will find three.module.js under the ./build/ folder.

Also, whether you get the error Relative module specifiers must start with “./”, “…/” or “/” depends on your browser. What browser are you using? On some browsers, the error causes the polyfill to action. But the error needs to be detected first.

I suspect,

  • that you are using firefox. Try a different browser.
  • you manually copied three.module.js to the jsm folder. This is ok if that’s what you actually want and your import map points to it and your server doesn’t return a 404.
  • on firefox, the load event only fires when all resources are fully loaded. The relative reference error was detected so this probably means it won’t fire when using firefox.

If your server isn’t returning a 404 for ./jsm/three.module.js, and you are using Firefox, then you may find that the three module actually did load.
Add this line after your three import statement. It should print a number.
console.log(THREE.REVISION)

3

Thanks, Sean:

You nailed it on all counts. I’m new to three.js and wanted to make sure it wasn’t my code. Firefox loads the module fine, but yields the error regardless. Very frustrating; I’m sure they know it’s an issue, but I’ll remind them. I don’t intend to stop using Firefox. Putting the event listener outside the module code block seems to work, but given my lack of knowledge about modules, the only way I can then get anything to work inside the module is to dispatch events outside of it, and add the listeners inside the module. Major pain.

Thanks again!

4

There are newer versions of the shim since 1.3.6.

<script async src="https://ga.jspm.io/npm:es-module-shims@1.5.17/dist/es-module-shims.js"></script>

The error still shows in firefox (and safari I think), but there is now an extra line in green to try to indicate that the error can be ignored.

image
image1225×209 16.1 KB