为何一条import语句会导致另一条模块导入失败？

我的JavaScript文件顶部有以下两条import语句：

import { FbxLoader } from "./ThreeJs/examples/jsm/loaders/FBXLoader.js";
import * as Three from "./ThreeJs/src/Three.js";

在浏览器中加载时，会抛出错误：

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

奇怪的是：

• 注释掉第一条import { FbxLoader }语句，错误就消失了，但错误信息里提到的"three"看似指向第二条import语句
• 调换两条import语句的顺序，控制台还是在同一行报相同的错误

文件路径是正确的——修改文件名会触发404错误，所以排除路径问题。这到底是怎么回事？

问题根本不在你的代码里，而是FBXLoader.js内部的import语句有问题。

Three.js的官方示例jsm模块（比如FBXLoader）是为npm环境设计的，它们内部会用裸模块标识符import ... from "three"来引用Three.js核心库。但浏览器原生ES模块不支持这种裸标识符，它要求所有模块引用必须是相对路径（./、../）或绝对路径。

当你导入FBXLoader时，浏览器会加载它的代码，然后遇到里面的import * as THREE from "three"，这时候它无法解析这个"three"，就会抛出你看到的错误。错误信息里的行号看似指向你的第二条import，其实是浏览器的报错定位有偏差，或者是因为FBXLoader的import语句在处理时关联到了你的代码上下文。

有几种可行的方案：

• 修改FBXLoader内部的import路径：打开FBXLoader.js，把里面所有from "three"的引用改成相对路径，比如from "../../../src/Three.js"（根据你的文件结构调整路径，确保能正确指向Three.js核心文件）。
• 使用打包工具（如Vite、Webpack）：这类工具会自动解析裸模块标识符，把"three"映射到本地的Three.js文件，适合复杂项目。
• 改用CDN版本的带依赖的FBXLoader：直接引用包含所有依赖的打包版本，避免手动处理路径问题。

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