如何修复SvelteKit中@threlte/extras的导入错误？

原因分析 #

这个错误是因为@threlte/extras内部依赖了Three.js的GroundProjectedEnv组件，但你的Three.js版本不包含该文件——GroundProjectedEnv是Three.js r158及以上版本才新增的特性，旧版Three.js里没有这个模块。

修复步骤 #

• 升级Three.js到兼容版本
  打开项目根目录的package.json，找到three依赖项，将版本号更新为^0.158.0或更高，然后执行安装命令：

  npm install three@latest
  # 或使用yarn/pnpm
  yarn add three@latest
  pnpm add three@latest
  

• 同步@threlte/extras版本
  确保@threlte/extras版本和Three.js版本匹配，执行命令更新到最新版：

  npm install @threlte/extras@latest
  # 或对应包管理器命令
  yarn add @threlte/extras@latest
  pnpm add @threlte/extras@latest
  

• 清除缓存并重启服务
  SvelteKit开发服务器可能缓存了旧依赖引用，按以下操作处理：

  1. 停止当前开发服务器
  2. 删除项目根目录的.svelte-kit和node_modules/.cache文件夹
  3. 重新启动开发服务器：npm run dev

验证导入 #

更新完成后，重新使用你的导入代码：

<script>
    import * as Extra from '@threlte/extras';
    import {GLTF} from '@threlte/extras'
</script>

内容的提问来源于stack exchange，提问作者Avi4nFLu