OrbitControls breaks project?

Questions
1

Hi there !
I decided to update my code to the latest three.js version and quite literally everything broke, some I was able to fix but some things are quite puzzling, like for example the fact that OrbitControls break the project on call. I thought I must be missing something so I made a codepen here with the controls commented out so you can see how it breaks the code when implemented. I have no idea what could be the cause, console says domElement is required as the second variable but using
const controls = new OrbitControls( camera, renderer.domElement );
doesn’t fix the issue either

2

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

Yes, the second parameter domElement is now required. But you can’t reference renderer before creating the renderer. So all it took was a little reordering and now it’s working:

let scene, renderer, controls;

//Scene
scene = new THREE.Scene();

//Camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

//Light
directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
scene.add( directionalLight );

//Renderer
renderer = new THREE.WebGLRenderer({
				antialias : true
			});
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

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

Note that I also chose to declare the scene, renderer, controls variables. Maybe that wasn’t even necessary.

I left everything else unchanged.

3

thank you !!