Search code examples
javascriptthree.jsimporterror

Why does one the presence of one Import statement break another?


I have a JavaScript file with the following two import statements at the top of it:

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

When I load this into a browser I get Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".. However, if I comment out the 1st import this error goes away but yet it looks like it's referring to the 2nd import since it makes reference to "three"!

If I swap the two imports around, the browser console still reports the same error on the same line!

What's going on here? The files definitely exist, the paths to them are definitely correct. If I make one of the file names incorrect I get a different (404) error in the console so it shouldn't be a bad path issue.


Solution

  • THREE.FBXLoader depends on the three.js library, and uses its own import to obtain those dependencies. That "three" import is a module specifier — not a full path — as of threejs r156, and is meant to be resolved by a bundler or build tool.

    Because you don't appear to be using a bundler or build tool here, the next best thing is to create an Import Map pointing imports of "three" to the location of that file in your own project. The three.js installation guide explains this in more detail – where it refers to a CDN, you could use local paths in your project instead.