strang bug with Environment

[ghostneneji]

• three version: 0.161.0
• @react-three/fiber version: 8.15.16
• @react-three/drei version: 9.97.0
• node version: 18.17.1
• npm (or yarn) version: 9.6.7
• nextjs version: 14.0.4

Problem description:

i have a page with three fiber scene and an overlay made by framer-motion with animations

<div className="w-screen h-screen overflow-hidden bg-white">
      <Canvas
        camera={{ position: [0, 0, 4], fov: 45, near: 0.1, far: 1000 }}
        dpr={[1, perfSucks ? 1.5 : 2]}
        gl={{ preserveDrawingBuffer: true }}
        id="canvas"
        shadows
      >
        <PerformanceMonitor
          onDecline={() => {
            degrade(true);
          }}
        />
        <Environment preset="sunset" background blur={0.3} />

        <AccumulativeShadows
          alphaTest={0.85}
          color="#000000"
          frames={100}
          opacity={0.8}
          position={[0, -0.005, 0]}
          scale={20}
        >
          <RandomizedLight amount={8} position={[5, 5, -10]} radius={4} />
        </AccumulativeShadows>
        <Grid
          renderOrder={-1}
          position={[0, 0, 0]}
          infiniteGrid
          cellSize={0.5}
          cellThickness={0.6}
          cellColor={new Color(0.4, 0.4, 0.4)}
          sectionSize={3}
          sectionThickness={2.5}
          sectionColor={new Color(0.4, 0.4, 0.4)}
          fadeDistance={20}
        />
        <EffectComposer disableNormalPass multisampling={4}>
          <N8AO distanceFalloff={1} aoRadius={1} intensity={4} />
        </EffectComposer>
        <CameraRig>
          <Suspense fallback={<LoadingIndicator />}>
            <Delorean />
          </Suspense>
        </CameraRig>
      </Canvas>
      <Overlay />
    </div>

1. conflict with framer-motion lib when the scene is loaded, the overlay animations stop working. when i remove the <Environment preset="sunset" background blur={0.3} /> from the Canvas, the animations of framer-motion work again.

If I change the environment preset to a file like this:

  const env = useEnvironment({
    files:
      "https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/autumn_field_1k.hdr",
  });

...

<Environment map={env} background blur={0.3} />

it works again, but it hangs in build with erro:

ReferenceError: ProgressEvent is not defined

Relevant code:

let your = (code, tell) => `the ${story}`

Suggested solution:

[alesaccoia]

same here