Cannot read properties of null (reading 'layers') when using raycaster.intersectObject

[russ0133]

Using raycaster.intersectObject into any object throws this error. I have another app with an older version of three-fiber which runs intersectObject fine and am trying to build a new app with new version of three-fiber, threejs etc, so I reckon something broke when updating?

export const Cup2: FC<CupInterface> = ({}) => {
  const mesh = useRef<Mesh<BufferGeometry, Material | Material[]>>(null);
  return (
    <group>
      <mesh ref={mesh}>
        <meshNormalMaterial />
        <boxGeometry args={[2, 2, 2]} />
      </mesh>
      <Hello mesh={mesh.current as any} />
    </group>
  );
};

const Hello: FC<CupInterface> = ({ mesh }) => {
  const { raycaster } = useThree();
  const b = raycaster.intersectObject(mesh);
  return <></>;
};

[CodyJasonBennett]

mesh is null on initial render as defined in setState. You'll need to use raycaster conditionally there:

const raycaster = useThree(state => state.raycaster)
if (mesh) {
  const b = raycaster.intersectObject(mesh)
}

[khoanguyen-3fc]

But, in my case, mesh is a ref, meaning it won't trigger any re-render. Due to this, b remains undefined.

[khoanguyen-3fc]

It's odd that ref.current has a value in useEffect but is null in useMemo.