安装使用@react-three/drei时触发three的DataUtils未导出导入错误

安全阿岳

2026-9-25

报错原因

这个报错是因为你的项目中three、@react-three/fiber、@react-three/drei三个依赖包的版本不匹配导致：@react-three/drei依赖的three-stdlib旧版本会直接从three核心包导入DataUtils，但Three.js在r154及之后版本移除了核心包对DataUtils的导出，就会触发导入失败的报错。

可行解决方法

方案1：使用经过验证的稳定适配版本组合
先卸载现有相关依赖：

npm uninstall three @react-three/fiber @react-three/drei
# 用yarn的话执行 yarn remove three @react-three/fiber @react-three/drei
# 用pnpm的话执行 pnpm remove three @react-three/fiber @react-three/drei

再安装兼容版本：

npm install three@0.153.0 @react-three/fiber@8.15.16 @react-three/drei@9.92.7

安装完成后重启项目即可正常运行。

方案2：升级依赖到最新适配版本
如果你需要使用高版本Three.js的新特性，可以直接将fiber和drei升级到最新正式版，新版drei依赖的three-stdlib已经修复了DataUtils的导入逻辑，适配了高版本Three.js：
```
npm install @react-three/fiber@latest @react-three/drei@latest
```
临时兼容方案（不推荐长期使用）
如果你暂时无法调整依赖版本，可以在打包工具配置中添加路径别名解决：
以Vite为例，在vite.config.js的resolve.alias配置项中添加：
```
resolve: {
  alias: {
    'three/lights/RectAreaLightUniformsLib': 'three/examples/jsm/lights/RectAreaLightUniformsLib.js',
    'three/utils/DataUtils': 'three/examples/jsm/utils/DataUtils.js'
  }
}
```