Vanta.js导入报错求助：间接导出歧义问题排查

算力阿峰

2026-8-20

解决Vanta.js与Three.js的导入错误问题

问题根源拆解

第一个错误：Uncaught TypeError: Error resolving module specifier...
浏览器原生ES模块不支持直接使用three这类裸模块名，必须使用相对路径、上级路径或绝对路径来指定模块位置。
第二个错误：Uncaught SyntaxError: ambiguous indirect export: default
Vanta的minified打包文件采用UMD格式（兼容全局变量、CommonJS等），并非标准ES模块，直接用默认导入会触发导出歧义。

解决方案一：原生ES模块兼容写法

修改导入逻辑，适配Vanta的导出格式，并使用Three.js官方提供的ES模块版本：

// 使用Three.js的ES模块版本（three.module.js）而非UMD版本
import * as THREE from "./node_modules/three/build/three.module.js";
// 导入整个Vanta模块，再兼容获取默认导出
import * as VantaBirds from "./node_modules/vanta/dist/vanta.birds.min.js";
const BIRDS = VantaBirds.default || VantaBirds;

const root = document.getElementById("root");

BIRDS({
  el: root,
  THREE,
});

说明：Three.js的three.module.js是专为ES模块设计的版本，避免UMD格式在原生模块环境中的潜在冲突。

解决方案二：使用打包工具（推荐）

如果不想手动处理路径和导出兼容问题，用Vite/Webpack等打包工具能彻底解决这类问题：

安装Vite（轻量快速的打包工具）：

npm install vite --save-dev

在package.json中添加运行脚本：

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

保持你最初的简洁导入语句不变：

import * as THREE from "three";
import BIRDS from "vanta/dist/vanta.birds.min";

const root = document.getElementById("root");

BIRDS({
  el: root,
  THREE,
});