I had a problem when importing the module three.js - import

Question

I wrote this thing in my HTML file
<script type="module" src="script.js"></script>
And this is the Javascript
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.SphereGeometry(1, 100, 100);
const material = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.8, metalness: 1});
const ball = new THREE.Mesh(geometry, material);
scene.add(ball);
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 10);
scene.add(light);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
ball.rotation.x += 0.01;
ball.rotation.y += 0.01;
ball.rotation.z += 0.01;
renderer.render(scene, camera);
};
animate();
Also the error in the browser console is this
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
I tried many times reinstalling the module, even asking chatGPT for help but it also doesn't work. I BET NO ONE CAN FIX THIS

Answer 1

You are missing an import map in your code. Add the following above your <script> tag.
<script async src="https://unpkg.com/es-module-shims#1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three#0.148/build/three.module.js"
}
}
</script>
This will load three.js from a CDN (unpkg). However, you can replace the URL with a path to your locally hosted three.js version.