截至 137 無法解析模塊說明符“三”

Question

回到一些舊項目，我發現沒有任何東西正在加載。 檢查控制台日志我看到以下內容：

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

在我的腳本中，我得到以下內容：

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

我嘗試后退一些版本，直到我到達0.136.0才消除此錯誤 go。 導入three.js的方式是否改變了，或者這是一個錯誤？

另外，是否有某種方法可以在運行時捕獲它？ 就像我從 Skypack 獲取最新版本號並嘗試導入一樣。 如果失敗，自動后退一位小數並重試。

編輯
@Mugen87 提供使用importmap 。 我用以下內容更改我的代碼：

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

我收到以下錯誤：

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'

Answer 1

您正在使用的 CDN (cdn.skypack.dev) 在他們這邊進行了一些重新導出，這導致了問題。

您在導入中引用的文件實際上不是 three.js 模塊，而是重定向。

該文件執行export * （很好）和export {default} ，這是發生故障的地方。 Three.js 沒有default導出。

Skypack 很可能將此重定向普遍應用於所有模塊，因此他們不一定知道這種情況正在發生，但他們絕對應該在托管特定模塊之前測試他們的系統......

嘗試更改您的importmap以引用以下 URL，它應該可以工作：

https://cdn.skypack.dev/-/three@v0.137.5-HJEdoVYPhjkiJWkt6XIa/dist=es2019,mode=raw/build/three.module.js