title: Failed to resolve module specifier three
body: <p>I am trying to work on the Three.js and now this time in three modules.
  I am using express as a backend server.</p>
  <p>I am constantly getting error of:</p>
  <p><em><strong>Uncaught TypeError: Failed to resolve module specifier &quot;three&quot;. Relative references must start with either &quot;/&quot;, &quot;./&quot;, or &quot;../&quot;.</strong></em> in my console.</p>
  <p>This is the backend code of app.js</p>
  <pre><code> &quot;use strict&quot;;
  
   const express = require(&quot;express&quot;);
   const app = express();
   const path = require(&quot;path&quot;);
  
   const port = process.env.PORT || 9000;
  
   app.use(express.static(__dirname + &quot;/public&quot;));
  
   app.use(&quot;/build/&quot;, express.static(path.join(__dirname, &quot;node_modules/three/build&quot;)));
   app.use(&quot;/jsm/&quot;, express.static(path.join(__dirname, &quot;node_modules/three/examples/jsm&quot;)));
  
   app.get(&quot;/&quot;, (req, res) =&gt; {
   response.send(&quot;Connected successfully&quot;);
  });
  
  app.listen(port, (error) =&gt; {
   if (error) {
    console.warn(`${error} occured while starting server`);
    return;
   }
   console.log(`listening successfully to the port ${port}`);
  });
  </code></pre>
  <p><em><strong>and this is my js file:</strong></em></p>
  <pre><code>import * as THREE from &quot;/build/three.module.js&quot;;
  import { OrbitControls } from &quot;/jsm/controls/OrbitControls.js&quot;;
  import Stats from &quot;/jsm/libs/stats.module.js&quot;;
  
  let scene, camera, renderer;
  
  function main() {
   scene = new THREE.Scene();
  
   const windowsWidth = window.innerWidth;
   const windowsHeight = window.innerHeight;
  
   renderer = new THREE.WebGLRenderer({ antialias: true });
   renderer.setSize(windowsWidth, windowsHeight);
   document.body.appendChild(renderer.domElement);
  
   const aspect = windowsWidth / windowsHeight;
   camera = new THREE.PerspectiveCamera(90, aspect, 0.1, 1000);
   camera.position.z = 2;
   // camera.position.set(-900, -200, -900);
  
   const controls = new OrbitControls(camera, renderer.domElement);
   controls.addEventListener(&quot;change&quot;, renderer);
  
   let materialArrays = [];
  
   let textureImages = [
     &quot;meadow_ft.jpg&quot;,
     &quot;meadow_bk.jpg&quot;,
     &quot;meadow_up.jpg&quot;,
     &quot;meadow_dn.jpg&quot;,
     &quot;meadow_rt.jpg&quot;,
     &quot;meadow_lf.jpg&quot;,
   ];
  
   for (let i = 0; i &lt; 6; i++) {
   let texture = new THREE.TextureLoader().load(
     `../images/skyboxday1/greenery/${textureImages[i]}`
   );
   let material = new THREE.MeshBasicMaterial({ map: texture });
   materialArrays.push(material);
  }
  
  const geometry = new THREE.boxGeometry(10000, 10000, 10000);
  
  let skyBox = new THREE.Mesh(geometry, materialArrays);
  scene.add(skyBox);
  function draw() {
    renderer.render(scene, camera);
    requestAnimationFrame(draw);
    }
   }
  
  main();
  </code></pre>
  <p>I included my js file in HTML with:</p>
  <pre><code>&lt;script type=&quot;module&quot; src=&quot;./client.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>This is my folder structure:</p>
  <p><a href="https://i.stack.imgur.com/Mu66m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mu66m.png" alt="enter image description here" /></a></p>