Typescript error for <TransformControls /> after upgraded drei from 2.1.1 to 5.0.0

[philxia]

I got a Typescript error as below after upgraded drei from 2.1.1 to 5.0.0.

Type '{ children: Element; mode: string; position: Vector3; rotation: Euler; onPointerUp: (event: any) => void; }' is missing the following properties from type 'Pick<Props, "id" | "camera" | "quaternion" | "attach"
| "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" |
"rotation" | ... 89 more ... | "showZ">': camera, size, enabled, space, and 7 more. TS2740

143 |     const transformControl: any = (
144 |       <>

145 | <TransformControls
| ^
146 | mode={mode}
147 | position={getVector3(this.props.instance.position)}
148 | rotation={

Here is my related dependencies -
"@react-three/drei": "5.0.0",
"@react-three/fiber": "6.0.0",
"three": "0.128.0",
"typescript": "~4.3.2",

Any ideas? Thanks.

[joshuaellis]

Have you installed @types/three?

[philxia]

Hi @MASTERAMARJEET thanks for your help, I can work around this by either provide all required props or modify https://github.com/pmndrs/drei/blob/master/src/core/TransformControls.tsx#L18 to make them all optional. @joshuaellis Do you think it is an issue that needs to be resolved? FYI, this only happens in Typescript clients. Thanks.

[MASTERAMARJEET]

@philxia Yes this does happen only for typescript. I think it is just because of the type definition in TransformControls.tsx.

And regarding passing all props, I did try that, but one of them is a camera, and as I am fairly new to R3F and React, I couldn't figure out how to create a single camera and share it with all components. For now, I have just ignored the file from typescript checking. If you know how to use a shared camera, please do share your solution. :)

[joshuaellis]

@philxia I think we should definitely look at fixing this, i'm not sure all of them should be optional unless we create some defaults, if you want to make a PR i'll happily have a look and give some direction 😄

[philxia]

@MASTERAMARJEET you can use const { camera } = useThree(); to get the camera and it has to be called inside of the body of a function component.
@joshuaellis I will make a PR for this. Shall I create an issue before I am doing so? Thank you.

[MASTERAMARJEET]

@philxia thanks. I will try that. @joshuaellis thanks for the quick response :)