Issue with importing Three.js

Questions
1

Hello,

I came back to a few month old project to check on it and it is having some issues:

https://codepen.io/michaelnicol/pen/PojObVP?editors=1112

In the JavaScript I import Three.js as such:

import * as THREE from "https://cdn.skypack.dev/three@0.133.1/build/three.module.js";
import { OrbitControls } from "https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls.js";
import dat from "https://cdn.skypack.dev/dat.gui";

However, I get the error:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". 
 at https://cdpn.io/cp/internal/boomboom/index.html?editors=1111&key=index.html-dbaa93e4-0b01-0567-d203-390c0c61b227:0

The program worked well over the last few months. Did something change with the import?

2

Remove the .js from the imports.
Also since there are newer versions since r133, you were requesting different versions of threejs,
Your three.module was 0.133.1,
But your OrbitControls was not explicitly set, so it was whatever was latest according to skypack.
0.137.4 probably.
This wasn’t causing your main issue, but would have become an issue eventually.

Try this if you want 0.133.1

import * as THREE from "https://cdn.skypack.dev/three@0.133.1/build/three.module";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.133.1/examples/jsm/controls/OrbitControls";
import dat from "https://cdn.skypack.dev/dat.gui";
1 Like