OrbitControls breaks project?

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

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 = new THREE.Scene();

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

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

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

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.

thank you !!