Returning to an older project, I realized that nothing was loading. When I checked the console log, this is what I found:
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
In my script, I had the following:
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three/build/three.module.js"
import { OBJLoader } from "https://cdn.skypack.dev/three/examples/jsm/loaders/OBJLoader.js"
import { FirstPersonControls } from "https://cdn.skypack.dev/three/examples/jsm/controls/FirstPersonControls.js"
I tried rolling back to version 0.136.0, and only then did the error disappear. Is there a change in the way three.js is imported, or is this a bug?
Is there a way to catch this at runtime? Like automatically stepping back a version if the latest import fails?
Edit
@Mugen87 suggests using importmap. So, I updated my code as follows:
<script type="importmap">
{
"imports": {
"three": "https://cdn.skypack.dev/three/build/three.module.js",
"three/OBJLoader": "https://cdn.skypack.dev/three/examples/jsm/loaders/OBJLoader.js",
"three/FirstPersonControls": "https://cdn.skypack.dev/three/examples/jsm/controls/FirstPersonControls.js"
}
}
</script>
<script type="module">
import * as THREE from "three"
import { OBJLoader } from "three/OBJLoader"
import { FirstPersonControls } from "three/FirstPersonControls"
But now I am getting this error:
Uncaught SyntaxError: The requested module '/-/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0b4a8b2a5a580b6f0eef1f3f7eef5ed888a85a4af969990a8aaaba98a97abb4f69889a1">[email protected]</a>/dist=es2019,mode=raw/build/three.module.js' does not provide an export named 'default'