Loading module from “http://localhost/js/three.module.js” was blocked because of a disallowed MIME type (“text/html”

Question

I am trying to use three.module.js but I'm having a big deal getting it to work die to the MIME type blocking, I'm using xampp as a local host (I set up xampp to allow .js types also as an attempt to solve the issue) but nothing seems to be working. the path seems correct, im hosting the files locally (tried linking to an online version too without success)

its even more confusing as OrbitControls.js does not seem to be blocked.

I tried the following: set up xampp to allow .js types also as an attempt to solve the issue) but nothing seems to be working. the path seems correct, im hosting the files locally (tried linking to an online version too without success). expecting either edge or firefox to allow the .js file but nothing.

file architecture is globe |__globe.html |__js |__three.module.js |__OrbitControls.js

CODE

// Import statements with paths relative to the root
import * as THREE from 'http://localhost/globe/js/three.module.js';
import { OrbitControls } from './OrbitControls.js';

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // Black background

// Camera setup
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Renderer setup
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Globe (sphere) setup
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// Lighting setup
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);

// OrbitControls setup
const controls = new OrbitControls(camera, renderer.domElement);

// Render loop
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

Answer 1

Install threejs in your project root:

npm i three

Import the module in your code

import * as THREE from “three”
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

You may need to bundle your code in order to run it (for example using esbuild) or set the script property type=“module”