Type 'RefObject<DirectionalLight>' is not assignable to type 'MutableRefObject<Object3D<Event>>

[steelx]

"@react-three/drei": "^9.57.0",
"@react-three/fiber": "^8.11.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"three": "^0.150.1"

Problem description:

how to use useHelper with DirectionalLight in typescript.
I get similar type error when using TransformControls as well.

Relevant code:

import { OrbitControls, useHelper } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { Perf } from "r3f-perf";
import { useRef, type PropsWithChildren } from "react";
import { DirectionalLightHelper, type DirectionalLight } from "three";

const LightWithHelper = () => {
	const dirLightRef = useRef<DirectionalLight | null>(null);
	if (dirLightRef !== null) {
		useHelper(dirLightRef, DirectionalLightHelper, 1, 0xff0000);
	}

	return (
		<directionalLight
			castShadow
			position={[1, 5, 5]}
			intensity={1.2}
			ref={dirLightRef}
		/>
	);
};

const FiberContainer = ({ children }: PropsWithChildren) => {
	return (
		<Canvas
			camera={{
				position: [14, 12, 5],
				fov: 40,
				near: 1,
				far: 200,
				zoom: 1,
			}}
			shadows
		>
			<Perf />
			<axesHelper />
			<OrbitControls
				makeDefault
				minDistance={1}
				maxDistance={200}
				enablePan={false}
				enableZoom={true}
			/>
			<ambientLight intensity={0.3} />
			<LightWithHelper />
			<color args={["ivory"]} attach="background" />
			{children}
		</Canvas>
	);
};

export default FiberContainer;

Suggested solution:

can you share any typescript examples ?

issue with TransformControls as well

[yardenxr]

it is relevant also for OrbitControls and i guess for all places which are using
type Ref<T> = RefCallback<T> | RefObject<T> | null;

[thomasryu]

I am also having the problem with TransformControls
when using drei with TypeScript

  Type 'RefObject<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>>' is not assignable to type 'MutableRefObject<Object3D<Object3DEventMap>>'.
    Types of property 'current' are incompatible.
      Type 'Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap> | null' is not assignable to type 'Object3D<Object3DEventMap>'.
        Type 'null' is not assignable to type 'Object3D<Object3DEventMap>'.ts(2322)
TransformControls.d.ts(7, 5): The expected type comes from property 'object' which is declared here on type 'IntrinsicAttributes & Omit<TransformControlsProps, "ref"> & RefAttributes<TransformControls<Camera>>'

[EngelbertTeh]

So is there a solution?

In the meantime i am using the any type

[lewsmith]

Same issue:

Argument of type 'RefObject<DirectionalLight>' is not assignable to parameter of type 'MutableRefObject<Object3D<Object3DEventMap>> | Falsy'.
  Type 'RefObject<DirectionalLight>' is not assignable to type 'MutableRefObject<Object3D<Object3DEventMap>>'.
    Types of property 'current' are incompatible.
      Type 'DirectionalLight | null' is not assignable to type 'Object3D<Object3DEventMap>'.
        Type 'null' is not assignable to type 'Object3D<Object3DEventMap>'.ts(2345)

Any solutions?

UPDATE:

Disabling strictNullChecks in the tsconfig.json fixes the error.