Uncaught TypeError: Failed to resolve module specifier "three" when importing from CDN in local server environment

Questions
, ,
1

Hello everyone,

I’m encountering the following error when trying to run my Three.js project locally using a Python HTTP server:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

Here is a simplified version of my setup:

  • I import Three.js and its examples modules directly from the CDN in my main.js file, which is loaded as a module in my HTML:
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/controls/OrbitControls.js';
  • My HTML includes:
<script type="module" src="main.js"></script>
  • I run a local server using:
python -m http.server 8000
  • I open the page at http://localhost:8000.

I verified that main.js is loaded properly (I added a console.log at the start). The error appears to come from somewhere inside the modules or a related import, but I only have this one JS file.

I suspect there might be a module import somewhere referencing "three" without a relative or absolute path, but I can’t find it.

Could someone help me identify what could cause this error in this setup? Any ideas or debugging tips would be greatly appreciated!

FULL CODE : https://codepen.io/Nathan-Loheac/pen/ZYbQMqO
Thanks in advance.

2

When using CodePen, I put the importmap in the HTML section, e.g.:

<script type="importmap">
  {
    "imports": {
		"three": "https://unpkg.com/three@0.154.0/build/three.module.js",
		"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/"
    }
  }
</script>

I put the imports the JS section, e.g.:

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

I hope that is the right syntax for r154 It’s been awhile.