Uncaught ReferenceError: THREE is not defined when importing OrbitControls and OBJLoader

Question

I just removed the CDN link to threejs in my html and instead imported threejs using npm. I'm using webpack to compile everything. However, although there are no error messages when compiling, my webapp breaks and returns an error that THREE is not defined. Here are the import statements I'm using:

import * as THREE from 'three';
import OrbitControls from 'three/examples/js/controls/OrbitControls.js'
import OBJLoader from 'three/examples/js/loaders/OBJLoader.js'

The browser console error directs me to the OrbitControls source code, and when I comment its import statement out it then directs me to OBJLoader source code. None of my code, but let me know if you need to see it to help debug. When I comment out both of those input statements, leaving just import * as THREE from 'three';, the page loads without error, although the 3d model I'm importing doesn't render. Any help would be greatly appreciated.

Answer 1

Try it with these imports:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'

Notice that you import now from the jsm directory which contains ES6 modules.