Failed to resolve module specifier "three" as of 137

Coming back to some old project, I discover nothing was loading. Checking the console log I see the following:

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

In my script I got 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 try to step back some versions and not until I reach 0.136.0 does this error go away. Has the way one imports three.js changed, or is this a bug?

Also, would there be some way of catching this at runtime? Like I get the latest version number from Skypack and try an import. If failed, automatically step back a decimal and try again.

Edit
@Mugen87 offers using importmap. I change my code with the following:

<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"

I get the following error:

Uncaught SyntaxError: The requested module '/-/[email protected]/dist=es2019,mode=raw/build/three.module.js' does not provide an export named 'default'

Solution

The CDN you're using (cdn.skypack.dev) does some re-exporting on their side, which is causing the problem.

The file you're referencing in your import isn't actually the three.js module, but a re-direct.

That file does an export * (which is fine), AND an export {default}, which is where the failure is occurring. Three.js does not have a default export.

Skypack is likely applying this redirect universally to all modules, so it's not that they necessarily KNOW this is happening, but they should definitely be testing their system before hosting a specific module...

Try changing your importmap to reference the following URL, and it should work:

https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=raw/build/three.module.js