Failed to resolve module specifier "three" as of 137

Question

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 '/-/three@v0.137.5-HJEdoVYPhjkiJWkt6XIa/dist=es2019,mode=raw/build/three.module.js' does not provide an export named 'default'

Does this answer your question: https://stackoverflow.com/a/71047538/5250847 — Mugen87, Feb 09 '22 at 15:15
You only have to define the import for `three`. Not for `OBJLoader` and `FirstPersonControls`. — Mugen87, Feb 09 '22 at 18:12

TheJim01 · Accepted Answer · 2022-02-09T21:29:47.057

1

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/-/three@v0.137.5-HJEdoVYPhjkiJWkt6XIa/dist=es2019,mode=raw/build/three.module.js

edited Feb 09 '22 at 21:29

answered Feb 09 '22 at 18:15

TheJim01

8,411
1
30
54

Ok, I see... Well, I did a little `php`ing and got the `export *` link so that I would always be importing from the latest version. Time to apply this everywhere. – Edward Feb 09 '22 at 20:10
Oh, hold on. Now `GLTFLoader.js` is unable to resolve 'three'. – Edward Feb 09 '22 at 20:31
@Edward I missed a word in my answer, and it will probably fix things... Change the `import`s in your code back to `three`, and change your import **map** to reference the URL above. – TheJim01 Feb 09 '22 at 21:31
Ah, there we go.... and `importmap` is not compatible with Firefox... Yes, I did look things up, and adding the shims did not seem to help. But all is fine on Chrome. – Edward Feb 09 '22 at 22:00
@Edward Yes, unfortunately `importmap` is still just a draft, which means it might not even make it into the final spec. But it's definitely a convenient way to test and debug code before it gets run through a builder. – TheJim01 Feb 10 '22 at 16:27

Failed to resolve module specifier "three" as of 137

1 Answers1