integration in typescript react project

[doebi]

Hi. While setting this up and testing it on a fresh react typescript project I ran into this issue.

Looks like some type definition problem. Am I missing something or are there breaking changes in one of the dependecy libraries?

Thanks.

ERROR in src/Model.tsx:25:12
TS2322: Type 'MutableRefObject<Group | undefined>' is not assignable to type 'Ref<Group> | undefined'.
  Type 'MutableRefObject<Group | undefined>' is not assignable to type 'RefObject<Group>'.
    Types of property 'current' are incompatible.
      Type 'Group | undefined' is not assignable to type 'Group | null'.
        Type 'undefined' is not assignable to type 'Group | null'.
    23 |   const { nodes, materials } = useGLTF('/model.gltf') as GLTFResult
    24 |   return (
  > 25 |     <group ref={group} {...props} dispose={null}>
       |            ^^^
    26 |       <mesh geometry={nodes.Cube.geometry} material={materials.Material} />
    27 |       <mesh geometry={nodes.foo.geometry} material={materials.material_0} rotation={[Math.PI / 2, 0, 0]} />
    28 |     </group>

[doebi]

update: did exactly the same in a non-typescript project and it works just fine.

[ChrisCrossCrash]

This probably is not the ideal solution, but I did this as a work-around:

export default function Model({ ...props }: JSX.IntrinsicElements['group']) {
  // Without `as` the type is:
  // (alias) useRef<THREE.Group>(): React.MutableRefObject<THREE.Group | undefined> (+2 overloads)
  const group = useRef<THREE.Group>() as React.MutableRefObject<THREE.Group>

  const { nodes, materials } = useGLTF('/r-place.glb') as GLTFResult
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh
        geometry={nodes.rPlaceGrid.geometry}
        material={materials.ColorMap}
        scale={10}
      />
    </group>
  )
}

[liuhuapiaoyuan]

const group = useRef<THREE.Group>(null)

[nightspite]

import { Group } from 'three';

const group = useRef<Group>(null!);

Same with the Mesh:

import { Mesh } from 'three';

const ref = useRef<Mesh>(null!);

[papyntown]

GLTFResult

Where GLTFResult come from