Currently, I am working on Three.js in three different modules and using Express as the backend server. In my console, I keep encountering the error:
"Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../"."
This code snippet below shows the backend code of app.js:
"use strict";
const express = require("express");
const app = express();
const path = require("path");
const port = process.env.PORT || 9000;
app.use(express.static(__dirname + "/public"));
app.use("/build/", express.static(path.join(__dirname, "node_modules/three/build")));
app.use("/jsm/", express.static(path.join(__dirname, "node_modules/three/examples/jsm")));
app.get("/", (req, res) => {
response.send("Connected successfully");
});
app.listen(port, (error) => {
if (error) {
console.warn(`${error} occurred while starting server`);
return;
}
console.log(`listening successfully to the port ${port}`);
});
Moreover, here is a snippet from my javascript file:
import * as THREE from "/build/three.module.js";
import { OrbitControls } from "/jsm/controls/OrbitControls.js";
import Stats from "/jsm/libs/stats.module.js";
// Rest of the JavaScript code has been omitted for brevity...
I have included the javascript file in HTML like this:
<script type="module" src="./client.js"></script>
Here is the visual representation of my folder structure: