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.
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.