"Access to fetch" CORS error due to an unrelated HDRI asset

[ryan-j-parker]

Hi all, I have an R3F component in my portfolio site that renders live previews of my past projects inside an iframe that is positioned in front of a GLTF model of a CRT television. Clicking on the dials cycles through the projects. When it works, it looks like this:

I'm not using any environment files in my canvas, but I'm getting an error that I haven't seen before, and it's breaking the site at that particular route.

I'm pretty new to web development and Three.js, so please excuse ignorance on my part. The site is built with React and all assets are hosted locally, and I'm not sure why this is happening. I've run an npm update, but the error persists.

Here's the code where I'm using the GLTF:

export default function CRT({ sourceIndex }) {
  const crt = useGLTF('/CRT/Television_01_1k.gltf');

  const crtMaterial = useRef();

  useFrame((state, delta) => {
    crtMaterial.current.uTime += delta;
  });

  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    if (clicked) {
      setClicked(true);
    } else {
      setClicked(false);
    }
  };

  return (
    <>
      <group
        dispose={null}
        scale={15}
        position={[0, 0.5, 2]}
        onClick={handleClick}
        castShadow
        receiveShadow
      >
        <primitive object={crt.scene} />
      </group>
      <group position={[-1, 4.4, 4.89]}>
        <Project sourceIndex={sourceIndex} />
        <mesh>
          <planeGeometry args={[5.5, 4.2]} />
          <crtMaterial ref={crtMaterial} />
        </mesh>
      </group>
      <group position={[3.17, 5.7, 5]}>
        <Channel />
      </group>
      <group position={[3.17, 4.5, 5]}>
        <Channel />
      </group>
    </>
  );
}

And here's the R3F scene where I'm using it:

export default function MainStage() {
  const [sourceIndex, setSourceIndex] = useState(0);

  const handleClickUp = () => {
    sourceIndex < 8 ? setSourceIndex(sourceIndex + 1) : setSourceIndex(0);
  };

  const handleClickDown = () => {
    sourceIndex > 0 ? setSourceIndex(sourceIndex - 1) : setSourceIndex(8);
  };

  const [hover, setHover] = useState(false);

  return (
    <>
      <div className="mainstage">
        <Suspense fallback={<Loader />}>
          <Canvas
            shadows
            className="mainstageCanvas"
            camera={{
              near: 0,
              far: 100,
              zoom: 10,
              position: [0, 2, 10],
              fov: 45,
            }}
            onCreated={({ gl }) => {
              gl.outputEncoding = THREE.sRGBEncoding;
              gl.toneMapping = THREE.ACESFilmicToneMapping;
              gl.toneMappingExposure = 1;
            }}
            style={{ height: '100%', width: '100%' }}
          >
            <PresentationControls
              target={[0, 20, 0]}
              polar={[-0.4, 0.4]}
              azimuth={[-1, 1]}
              config={{ mass: 2, tension: 400 }}
              snap={{ mass: 2, tension: 400 }}
            >
              <pointLight intensity={5} position={[4, 2, 2]} />
              <Stage shadows="contact" adjustCamera={10} preset="soft">
                <Float
                  floatIntensity={0.75}
                  floatingRange={0.05}
                  rotationIntensity={0.5}
                  rotateOnAxis={'y'}
                >
                  <App3dText
                    position={[0, 10.25, 3.25]}
                    text={'click on the dials to view'}
                    title="click dials see projects"
                    castShadow
                    size={0.55}
                    matcapIndex={0}
                  />
                  <App3dText
                    position={[0, 8.75, 3.25]}
                    text={'Projects'}
                    size={1.6}
                    title="projects"
                    castShadow
                    matcapIndex={1}
                  />
                </Float>
                <mesh castShadow receiveShadow>
                  <CRT sourceIndex={sourceIndex} position={[0, 0, -20]} />
                </mesh>
                <Html position={[3.18, 4.74, 4.8]} transform>
                  <div className="channel upArrow" onClick={handleClickUp} />
                  <div className="channel downArrow" onClick={handleClickDown} />
                </Html>
              </Stage>
            </PresentationControls>
          </Canvas>
        </Suspense>
      </div>
    </>
  );
}

Is the error coming from a dependency, or is it something local? I'm currently looking for a job, so I want to have a working portfolio site. I would be super grateful for any solutions. Thank you!!