Cannot read properties of null (reading 'addEventListener'). When trying to use my gltf with useGLTF

[Wesley-dv]

I keep getting the error: TypeError: Cannot read properties of null (reading 'addEventListener')

When attempting to import my gltf with the gltfjsx generated file into my live WordPress website as a plugin. When i try the code locally then i get no errors but when i try it on my live website then the errors appears. The file path so that should be okay because those errors i already fixed. Can someone maybe help me? This is my code:

`/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx [email protected] public/models/dakkapel-model-2.gltf
*/

import React, { useRef } from 'react'
import { useGLTF, useTexture } from '@react-three/drei';
import * as THREE from "three";
import { useCustomization } from '../context/Customization';
import { useFrame } from '@react-three/fiber';
import { Vector3 } from "three";

const ANIM_SPEED = 12;
let frame_top_part_1_scale_y = 1;
let frame_top_part_1_location_z = 0;
let frame_top_part_2_location_y = 0;
let frame_top_part_2_location_z = 0;

const Dakkapel = (props) => {
const { nodes, materials } = useGLTF('/wp-content/plugins/sq-configurator/public/models/dakkapel-model-2.gltf');
const { rcWidth } = useCustomization();

const frame_top_part_1_changed = useRef();
const frame_top_part_2_changed = useRef();

useFrame((_state, delta) => {
switch (rcWidth) {
case "5":
frame_top_part_1_scale_y = 1.2;
frame_top_part_1_location_z = -0.89;
frame_top_part_2_location_y = -0.25;
frame_top_part_2_location_z = 0.16;
break;
case "4":
frame_top_part_1_scale_y = 1;
frame_top_part_1_location_z = 0;
frame_top_part_2_location_y = 0;
frame_top_part_2_location_z = 0;
break;
case "3":
frame_top_part_1_scale_y = 0.8;
frame_top_part_1_location_z = 0.87;
frame_top_part_2_location_y = 0.49;
frame_top_part_2_location_z = -0.23;
break;
case "2":
frame_top_part_1_scale_y = 0.75;
frame_top_part_1_location_z = 1.09;
frame_top_part_2_location_y = 0.55;
frame_top_part_2_location_z = -0.27;
break;
case "1":
frame_top_part_1_scale_y = 0.70;
frame_top_part_1_location_z = 1.31;
frame_top_part_2_location_y = 0.61;
frame_top_part_2_location_z = -0.31;
break;
case "0":
frame_top_part_1_scale_y = 0.65;
frame_top_part_1_location_z = 1.53;
frame_top_part_2_location_y = 0.67;
frame_top_part_2_location_z = -0.35;
break;
}

const targetScale_1 = new Vector3(1, 1, frame_top_part_1_scale_y);
frame_top_part_1_changed.current.scale.lerp(targetScale_1, delta * ANIM_SPEED);

const targetLocation_1 = new Vector3(0, frame_top_part_1_location_z, 0);
frame_top_part_1_changed.current.position.lerp(targetLocation_1, delta * ANIM_SPEED);

const targetLocation_2 = new Vector3(0, frame_top_part_2_location_z, frame_top_part_2_location_y);
frame_top_part_2_changed.current.position.lerp(targetLocation_2, delta * ANIM_SPEED);

});

//TEXTURES
const frameTextureProps = useTexture({
map: './textures/frame/Wood_Plywood_Front_001_basecolor.jpg',
normalMap: './textures/frame/Wood_Plywood_Front_001_normal.jpg',
roughnessMap: './textures/frame/Wood_Plywood_Front_001_roughness.jpg',
aoMap: './textures/frame/Wood_Plywood_Front_001_ambientOcclusion.jpg',
});

frameTextureProps.map.repeat.set(2, 2);
frameTextureProps.normalMap.repeat.set(2, 2);
frameTextureProps.roughnessMap.repeat.set(2, 2);
frameTextureProps.aoMap.repeat.set(2, 2);

frameTextureProps.map.wrapS = frameTextureProps.map.wrapT =
frameTextureProps.normalMap.wrapS = frameTextureProps.normalMap.wrapT =
frameTextureProps.roughnessMap.wrapS = frameTextureProps.roughnessMap.wrapT =
frameTextureProps.aoMap.wrapS = frameTextureProps.aoMap.wrapT =

THREE.RepeatWrapping;

return (
<group {...props} dispose={null}>
<mesh geometry={nodes.Window_horz_part_6.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Window_vert_part_1.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh
geometry={nodes.Frame_bottom_part_1.geometry}
material={materials.Part2Mtl}
rotation={[Math.PI / 2, 0, 0]}>
<meshStandardMaterial {...frameTextureProps} />

<mesh
geometry={nodes.Roof_bottom_part.geometry}
material={materials.Part5Mtl}
rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Window_vert_part_2.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Window_part_bottom.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Roof_left_part.geometry} material={materials.Part5Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh
geometry={nodes.Frame_top_part_1.geometry}
material={materials.Part2Mtl}
rotation={[Math.PI / 2, 0, 0]}
ref={frame_top_part_1_changed} >
<meshStandardMaterial {...frameTextureProps} />

<mesh geometry={nodes.Window_horz_part_1.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh
geometry={nodes.Frame_right_part.geometry}
material={materials.Part2Mtl}
rotation={[Math.PI / 2, 0, 0]} >
<meshStandardMaterial {...frameTextureProps} />

<mesh geometry={nodes.Roof_right_part.geometry} material={materials.Part5Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh
geometry={nodes.Frame_top_part_2.geometry}
material={materials.Part2Mtl}
rotation={[Math.PI / 2, 0, 0]}
ref={frame_top_part_2_changed} >
<meshStandardMaterial {...frameTextureProps} />

<mesh geometry={nodes.Window_vert_part_5.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Window_vert_part_4.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Roof_top_part.geometry} material={materials.Part5Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Window_horz_part_5.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Window_vert_part_6.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh
geometry={nodes.Frame_left_part.geometry}
material={materials.Part2Mtl}
rotation={[Math.PI / 2, 0, 0]} >
<meshStandardMaterial {...frameTextureProps} />

<mesh geometry={nodes.Window_vert_part_7.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Window_horz_part_3.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh
geometry={nodes.Frame_bottom_part_2.geometry}
material={materials.Part5Mtl}
rotation={[Math.PI / 2, 0, 0]} >
<meshStandardMaterial {...frameTextureProps} />

<mesh geometry={nodes.Window_part_top.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Window_vert_part_3.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Window_horz_part_2.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.Window_horz_part_4.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} />

)
}

useGLTF.preload('/wp-content/plugins/sq-configurator/public/models/dakkapel-model-2.gltf')

export default Dakkapel;`