title: Not using node.js : Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../"
body: <p>i have this simple js sample which i test via visual studio code with live preview server build in:
  i don't use node.js in this sample
  all js files under js dir :</p>
  <pre><code>C:\Dev\my\javascript\ThreeJS\tests\js&gt;ls -1
  GLTFLoader.js
  OrbitControls.js
  main.js
  three.js
  three.min.js
  three.module.js
  </code></pre>
  <p>HTML:</p>
  <p>but i keep getting this general error :</p>
  <pre><code>   Uncaught TypeError: Failed to resolve module specifier &quot;three&quot;. Relative references must start with either &quot;/&quot;, &quot;./&quot;, or &quot;../&quot;.
  </code></pre>
     
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
          &lt;meta charset=&quot;UTF-8&quot; /&gt;
          &lt;title&gt;My first three.js app&lt;/title&gt;
          &lt;link href=&quot;main.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
          &lt;script type=&quot;module&quot; src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id=&quot;scene-container&quot;&gt;
              &lt;canvas&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>in js/main.js</p>
  <pre><code>import {
    BoxBufferGeometry,
    Color,
    Mesh,
    MeshBasicMaterial,
    PerspectiveCamera,
    Scene,
    WebGLRenderer,
  } from 'three';
  
  // Get a reference to the container element that will hold our scene
  const container = document.querySelector('#scene-container');
  
  // create a Scene
  const scene = new Scene();
  
  // Set the background color
  scene.background = new Color('skyblue');
  
  // Create a camera
  const fov = 35; // AKA Field of View
  const aspect = container.clientWidth / container.clientHeight;
  const near = 0.1; // the near clipping plane
  const far = 100; // the far clipping plane
  
  const camera = new PerspectiveCamera(fov, aspect, near, far);
  
  // every object is initially created at ( 0, 0, 0 )
  // move the camera back so we can view the scene
  camera.position.set(0, 0, 10);
  
  // create a geometry
  const geometry = new BoxBufferGeometry(2, 2, 2);
  
  // create a default (white) Basic material
  const material = new MeshBasicMaterial();
  
  // create a Mesh containing the geometry and material
  const cube = new Mesh(geometry, material);
  
  // add the mesh to the scene
  scene.add(cube);
  
  // create the renderer
  const renderer = new WebGLRenderer();
  
  // next, set the renderer to the same size as our container element
  renderer.setSize(container.clientWidth, container.clientHeight);
  
  // finally, set the pixel ratio so that our scene will look good on HiDPI displays
  renderer.setPixelRatio(window.devicePixelRatio);
  
  // add the automatically created &lt;canvas&gt; element to the page
  container.append(renderer.domElement);
  
  // render, or 'create a still image', of the scene
  renderer.render(scene, camera);
  </code></pre>