R3F UnrealBloomPass Error when deployed to Vercel:: Uncaught TypeError: Cannot read properties of undefined (reading 'x')

Question

In my Localhost the unrealBloomPass working fine no error but when I try to deploy it on vercel the unrealBloomPass doesn't work and the console error says:: Uncaught TypeError: Cannot read properties of undefined (reading 'x')

error on Vercel

working fine on Localhost

const Experience = () => {

{Declaration and logics here}

return (
    <group ref={scene} className="z-30">
      <Environment preset="night" />
      <PerspectiveCamera
        theatreKey="Camera"
        makeDefault
        position={[0, 3.5, 1.85]}
        fov={90}
        near={0.1}
        far={70}
      />
      <StarParticles />
      <CustomLights />

      <Model currentPage={currentPage} />
     <Effects disableNormalPass>
          <unrealBloomPass threshold={1} strength={0.9} radius={0.8} />
          <outputPass args={[THREE.ACESFilmicToneMapping]} />
        </Effects>
        <EffectComposer   >
          <Bloom mipmapBlur luminanceThreshold={1} levels={8} intensity={0.40 * 4} />
          <ToneMapping mode={ToneMappingMode.ACES_FILMIC} />
        </EffectComposer>
      {/* <Rig/> */}
      <Preload all />
    </group>
  );
}

export default Experience;

I try to replace the model by using this example shape with emissive property. same output unrealBloomPass working on localhost and Error on Vercel live Production.

const Experience = () => {

{Declaration and logics here}

return (
    <group ref={scene} className="z-30">
      <Environment preset="night" />
      <PerspectiveCamera
        theatreKey="Camera"
        makeDefault
        position={[0, 3.5, 1.85]}
        fov={90}
        near={0.1}
        far={70}
      />
      <StarParticles />
      <CustomLights />

       <Shape color="hotpink" position={[-2, 0, 0]}>
        <planeGeometry args={[1.5, 1.5]} />
      </Shape>
     <Effects disableNormalPass>
          <unrealBloomPass threshold={1} strength={0.9} radius={0.8} />
          <outputPass args={[THREE.ACESFilmicToneMapping]} />
        </Effects>
        <EffectComposer   >
          <Bloom mipmapBlur luminanceThreshold={1} levels={8} intensity={0.40 * 4} />
          <ToneMapping mode={ToneMappingMode.ACES_FILMIC} />
        </EffectComposer>
      {/* <Rig/> */}
      <Preload all />
    </group>
  );
}

export default Experience;

function Shape({ children, color, ...props }) {
  const [hovered, hover] = useState(true)
  return (
    <mesh {...props} onPointerOver={() => hover(false)} onPointerOut={() => hover(true)}>
      {children}
      <meshStandardMaterial color={color} emissive={color} emissiveIntensity={!hovered ? 4 : 0} toneMapped={false} />
    </mesh>
  )
}