Uncaught SyntaxError: The requested module './js/OrbitControls.js' does not provide an export named 'OrbitControls'

Questions
1

My code is:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demoThreeJs</title>
		<style>
			body { margin: 0; }
			canvas { display: block; }
		</style>
	</head>
	<body>
		<script type="module">

		import * as THREE from './js/three.module.js';
		import { OrbitControls } from './js/OrbitControls.js';
		import { OBJLoader2 } from './loader/OBJLoader2.js';

		const renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		window.addEventListener( 'resize', function() {
			const width = window.innerWidth;
			const heigth = window.innerHeight;
			renderer.setSize( width, heigth );
			camera.aspect = width / heigth;
			camera.updateProjectionMatrix();
		});

		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); //( fov, aspect, near, far )

		controls = new THREE.OrbitControls( camera, renderer.domElement );

		camera.position.z = 3;

		const objloader = new OBJLoader2();
		objloader.load( 'models/obj/cerberus/Cerberus.obj', ( root ) => {
			scene.add(root);
		});

		var animate = function () {
					requestAnimationFrame( animate );

					renderer.render( scene, camera );
				};

		animate();

		</script>
	</body>
</html>

What am i missing?

2

Are you referring here to the actual ES6 module? You can easily verify this by checking if respective import/export statements are presents in the file’s source code.

3

Seems no import/export statements are present in OrbitControls.js

4

Well, that’s the root cause of the issue. You can’t load a non-module file with an ES6 import statement. The following code section should work though:

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { OBJLoader2 } from "https://threejs.org/examples/jsm/loaders/OBJLoader2.js";
1 Like