ThreeJS - Uncaught TypeError: b[c].call is not a function - Orbit Controls

Question

So I am working on a three.js project. And I got my orbit controls working. They function normally but for every single pixel I move over with my mouse, I get the following error:

Uncaught TypeError: b[c].call is not a function
    at THREE.OrbitControls.dispatchEvent (three.min.js:343)
    at THREE.OrbitControls.update (OrbitControls.js:230)
    at handleMouseMoveRotate (OrbitControls.js:493)
    at HTMLDocument.onMouseMove (OrbitControls.js:901)

And here is my code:

        function initial() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 45, 30000);
            camera.position.set(-100, 0, -1200);
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            let controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.addEventListener('change', renderer);
            controls.minDistance = 500;
            controls.maxDistance = 1500;
            controls.dampingFactor = 0.25; // friction
            controls.rotateSpeed = 0.5; // mouse sensitivity

            let materialArray = [];
            let texture_ft = new THREE.TextureLoader().load('./assets/px.jpg');
            let texture_bk = new THREE.TextureLoader().load('./assets/nx.jpg');

            let texture_up = new THREE.TextureLoader().load('./assets/py.jpg');
            let texture_dn = new THREE.TextureLoader().load('./assets/ny.jpg');

            let texture_rt = new THREE.TextureLoader().load('./assets/pz.jpg');
            let texture_lf = new THREE.TextureLoader().load('./assets/nz.jpg');

            materialArray.push(new THREE.MeshBasicMaterial({
                map: texture_ft
            }));
            materialArray.push(new THREE.MeshBasicMaterial({
                map: texture_bk
            }));
            materialArray.push(new THREE.MeshBasicMaterial({
                map: texture_up
            }));
            materialArray.push(new THREE.MeshBasicMaterial({
                map: texture_dn
            }));
            materialArray.push(new THREE.MeshBasicMaterial({
                map: texture_rt
            }));
            materialArray.push(new THREE.MeshBasicMaterial({
                map: texture_lf
            }));

            for (let i = 0; i < 6; i++)
                materialArray[i].side = THREE.BackSide;

            let skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
            let skybox = new THREE.Mesh(skyboxGeo, materialArray);
            scene.add(skybox);

            animate();
        }


        function animate() {
            renderer.render(scene,camera);
            requestAnimationFrame(animate);
          }
        initial();

I've already googled this error but couldn't find a solution. Anyone knows how to fix this?

Answer 1

You dont need controls.addEventListener('change', renderer);, you can use controls.update().

The same error appeared for me, but it resolved when I stopped using three.min.js for three.js.