Relative module specifiers must start with “./”, “../” or “/”

Question

I am trying to import three.js. I am following the documentation, however I am getting the error:

Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”

My import statements:

<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/[email protected]/build/three.module.js"
    }
  }
</script>

<script type="module">

  import * as THREE from 'three';
  const scene = new THREE.Scene();

</script>

Am I importing it wrong? Where would I put the “./”, “../” or “/”?

Answer 1

I feel like you're overcomplicating things with the import maps, and you're introducing the risk of very poor browser support, as brought up by TheJim01.

Just copy the three.module.js file from https://unpkg.com/[email protected]/build/three.module.js to a local folder in your app like /libraries/three.module.js.

Then import it with

<script type="module">

  import * as THREE from './libraries/three.module.js';
  const scene = new THREE.Scene();

</script>