Description
I am trying to use the OrbitControls from THREE.js in my project. When I attempt to import the OrbitControls object, I am getting the following error message in the Google Chrome DevTools console.
The requested module './three.js' does not provide an export named 'EventDispatcher'
When I manually inspect three.js (r119), I can see that it does export EventDispatcher on line 50631.
Question: Given this information, why am I getting the aforementioned error message, and how can I fix this?
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<script src="three.js" crossorigin="anonymous"></script>
<script src="main.js" type="module"></script>
</body>
</html>
main.js
import { OrbitControls } from './OrbitControls.js'
EDIT: Thanks to Steve, the root cause of my issue was that I was using the non-module version of three.js instead of the correct one (for my use case) called three.module.js. If you're getting the error message, make sure you're downloading the three.module.js file.
Description
I am trying to use the OrbitControls from THREE.js in my project. When I attempt to import the OrbitControls object, I am getting the following error message in the Google Chrome DevTools console.
The requested module './three.js' does not provide an export named 'EventDispatcher'
When I manually inspect three.js (r119), I can see that it does export EventDispatcher on line 50631.
Question: Given this information, why am I getting the aforementioned error message, and how can I fix this?
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<script src="three.js" crossorigin="anonymous"></script>
<script src="main.js" type="module"></script>
</body>
</html>
main.js
import { OrbitControls } from './OrbitControls.js'
EDIT: Thanks to Steve, the root cause of my issue was that I was using the non-module version of three.js instead of the correct one (for my use case) called three.module.js. If you're getting the error message, make sure you're downloading the three.module.js file.
-
1
OrbitControls are not included in
'three'instead you need to import them from examples, something like this:'three/examples/jsm/controls/OrbitControls– George Commented Aug 5, 2020 at 16:25 -
@George Yeah, I should have mentioned that I already downloaded
OrbitControls.jsand included it in my project. It's that script that's throwing the error message. It's weird, becausethree.jsclearly exportsEventDispatcher, butOrbitControls.jsdoesn't seem to pick up on it – user189198 Commented Aug 5, 2020 at 16:33 - Also, just FYI I'm not using a bundler. I literally just have an HTML page and a few JavaScript files locally. – user189198 Commented Aug 5, 2020 at 16:35
-
Then just import as i stated above instead of downloading it directly. it's probably trying to import something from three relatively but can't because it's no longer in the examples folder. See Orbit controls first lines
import { EventDispatcher, MOUSE, Quaternion, Spherical, TOUCH, Vector2, Vector3 } from "../../../build/three.module.js";– George Commented Aug 5, 2020 at 16:40
1 Answer
Reset to default 6I'm assuming you're using the OrbitControls.js found in https://github./mrdoob/three.js/blob/dev/examples/jsm/controls/OrbitControls.js
You're mixing the module library with the non-module library. If you look at the first lines of OrbitControls.js
import {
EventDispatcher,
MOUSE,
Quaternion,
Spherical,
TOUCH,
Vector2,
Vector3
} from "../../../build/three.module.js";
It's trying to import variables from ../../../build/three.module.js, which probably doesn't exist. From your error message, it seems like someone already edited it to be './three.js', which sounds like the non-module version.
Solutions
Preserving references
- Download all of
three.jsto a folder (likelib/three) - (Optionally) Delete files you don't need
Import via:
import { OrbitControls } from './lib/three/examples/jsm/controls/OrbitControls.js';
import * as THREE from './lib/three/build/three.module.js';
Modifying only the files you need
Or you can download only the files you need and change the references:
- Download
three.module.jsfrom https://github./mrdoob/three.js/blob/dev/build/three.module.js - Replace
../../../build/three.module.jsinOrbitControls.jsto the appropriate path. It should be wherethree.module.jsis in relationship toOrbitControls.js - Delete the
<script src="three.js">tag in your HTML, sinceOrbitControls.jsdirectly imports it
Linking to a CDN
Alternatively, you can link directly to a CDN, like:
import { OrbitControls } from 'https://unpkg./[email protected]/examples/jsm/controls/OrbitControls.js';
import * as THREE from 'https://unpkg./[email protected]/build/three.module.js';
This works because all of the required files are hosted by the CDN