I’m running into a strange issue with react-three-fiber that only shows up in development, but not after deploying to Vercel.

Here’s my setup:

<Canvas gl={{ antialias: true }} camera={{ position: [0, 0, 10], fov: 25, near: 1, far: 100 }}>
  <mesh ref={globeRef}>
    <sphereGeometry args={[2, 18, 18]} />
    <meshStandardMaterial transparent opacity={0.9} />
    <Edges color="gray" lineWidth={0.5} threshold={0.1} />
    {countries && <primitive object={countries} />}
  </mesh>

  <Abc globeRef={globeRef} />
  <OrbitControls enableZoom={false} enableDamping />
</Canvas>

I pass the mesh ref into another component and use it inside useFrame:

function Abc({ globeRef }) {
  useFrame((state, delta) => {
    if (globeRef) {
      console.log("Hello:", delta)
      console.log(globeRef)
    }
  })
  return null
}

Even though I’m just logging the ref, I get this error in development:

Uncaught TypeError: Cannot convert undefined or null to object
at three.core.js:14737

What’s confusing is:

• It only happens in development
• It never happens in production
• If I remove these two lines, the error goes away in dev:

<Edges color="gray" lineWidth={0.5} threshold={0.1} />
{countries && <primitive object={countries} />}

I don’t understand why these components affect the ref or why this issue only exists in development.

I’m running into a strange issue with react-three-fiber that only shows up in development, but not after deploying to Vercel.

Here’s my setup:

<Canvas gl={{ antialias: true }} camera={{ position: [0, 0, 10], fov: 25, near: 1, far: 100 }}>
  <mesh ref={globeRef}>
    <sphereGeometry args={[2, 18, 18]} />
    <meshStandardMaterial transparent opacity={0.9} />
    <Edges color="gray" lineWidth={0.5} threshold={0.1} />
    {countries && <primitive object={countries} />}
  </mesh>

  <Abc globeRef={globeRef} />
  <OrbitControls enableZoom={false} enableDamping />
</Canvas>

I pass the mesh ref into another component and use it inside useFrame:

function Abc({ globeRef }) {
  useFrame((state, delta) => {
    if (globeRef) {
      console.log("Hello:", delta)
      console.log(globeRef)
    }
  })
  return null
}

Even though I’m just logging the ref, I get this error in development:

Uncaught TypeError: Cannot convert undefined or null to object
at three.core.js:14737

What’s confusing is:

• It only happens in development
• It never happens in production
• If I remove these two lines, the error goes away in dev:

<Edges color="gray" lineWidth={0.5} threshold={0.1} />
{countries && <primitive object={countries} />}

I don’t understand why these components affect the ref or why this issue only exists in development.Here is the component where the error originates: https://github.com/sakshamwithweb/uConnect/blob/main/components/Globe.js

In DevTools, the error ultimately points to this line in Three.js:

delete data.metadata;

However, the first line from my own code that appears in the stack trace is:

console.log(globeRef)