Typescript suddenly started to error on missing props for many Drei components (Box, Detailed, Text etc)

[looeee]

This morning I updated to R3F @8 beta 04 and then tried to build my project. It failed with an error regarding missing props on many Drei components. I'm fairly sure that I didn't change anything else and these errors didn't exist on Friday when I last was working on this.

So basically all optional props seem to be marked as required.

(alias) const Box: React.ForwardRefExoticComponent<Pick<Omit<MeshProps, "args"> & {
    args?: [width?: number | undefined, height?: number | undefined, depth?: number | undefined, widthSegments?: number | undefined, heightSegments?: number | undefined, depthSegments?: number | undefined] | undefined;
    children?: React.ReactNode;
}, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | ... 76 more ... | "updateMorphTargets"> & React.RefAttributes<...>>
import Box
Type '{ position: number[]; }' is missing the following properties from type 'Pick<Omit<MeshProps, "args"> & { args?: [width?: number | undefined, height?: number | undefined, depth?: number | undefined, widthSegments?: number | undefined, heightSegments?: number | undefined, depthSegments?: number | undefined] | undefined; children?: ReactNode; }, "material" | ... 85 more ... | "updateMorphT...': onPointerMissed, material, quaternion, attach, and 92 more.ts(2740)

Initially I thought this must be caused by the upgrade so I tried updating Drei too, from 7.24.0 to 8.0.0. This didn't change anything though, so I made a sandbox. And now I'm very confused because the error seems to remain for any version of R3F and Drei. You can try out the sandbox here:

https://codesandbox.io/s/condescending-river-lk8hr

Codesandbox is more lenient than my project so it does run successfully despite the error. My project won't build at all until I fix it.

If I select the lightbulb and "add missing attributes":

Then I get all this junk:

 <Box
        position={[-1.2, 0, 0]}
        key={undefined}
        attach={undefined}
        onUpdate={undefined}
        up={undefined}
        scale={undefined}
        rotation={undefined}
        matrix={undefined}
        quaternion={undefined}
        layers={undefined}
        dispose={undefined}
        onClick={undefined}
        onContextMenu={undefined}
        onDoubleClick={undefined}
        onPointerUp={undefined}
        onPointerDown={undefined}
        onPointerOver={undefined}
        onPointerOut={undefined}
        onPointerEnter={undefined}
        onPointerLeave={undefined}
        onPointerMove={undefined}
        onPointerMissed={undefined}
        onPointerCancel={undefined}
        onWheel={undefined}
        visible={undefined}
        attachArray={undefined}
        attachObject={undefined}
        type={undefined}
        id={undefined}
        uuid={undefined}
        name={undefined}
        parent={undefined}
        modelViewMatrix={undefined}
        normalMatrix={undefined}
        matrixWorld={undefined}
        matrixAutoUpdate={undefined}
        matrixWorldNeedsUpdate={undefined}
        castShadow={undefined}
        receiveShadow={undefined}
        frustumCulled={undefined}
        renderOrder={undefined}
        animations={undefined}
        userData={undefined}
        customDepthMaterial={undefined}
        customDistanceMaterial={undefined}
        isObject3D={undefined}
        onBeforeRender={undefined}
        onAfterRender={undefined}
        applyMatrix4={undefined}
        applyQuaternion={undefined}
        setRotationFromAxisAngle={undefined}
        setRotationFromEuler={undefined}
        setRotationFromMatrix={undefined}
        setRotationFromQuaternion={undefined}
        rotateOnAxis={undefined}
        rotateOnWorldAxis={undefined}
        rotateX={undefined}
        rotateY={undefined}
        rotateZ={undefined}
        translateOnAxis={undefined}
        translateX={undefined}
        translateY={undefined}
        translateZ={undefined}
        localToWorld={undefined}
        worldToLocal={undefined}
        lookAt={undefined}
        add={undefined}
        remove={undefined}
        removeFromParent={undefined}
        clear={undefined}
        getObjectById={undefined}
        getObjectByName={undefined}
        getObjectByProperty={undefined}
        getWorldPosition={undefined}
        getWorldQuaternion={undefined}
        getWorldScale={undefined}
        getWorldDirection={undefined}
        raycast={undefined}
        traverse={undefined}
        traverseVisible={undefined}
        traverseAncestors={undefined}
        updateMatrix={undefined}
        updateMatrixWorld={undefined}
        updateWorldMatrix={undefined}
        toJSON={undefined}
        clone={undefined}
        copy={undefined}
        addEventListener={undefined}
        hasEventListener={undefined}
        removeEventListener={undefined}
        dispatchEvent={undefined}
        material={undefined}
        geometry={undefined}
        morphTargetInfluences={undefined}
        morphTargetDictionary={undefined}
        isMesh={undefined}
        updateMorphTargets={undefined}
      />

If I do the same on my own project (now with Drei @8.0.0 and R3f 8beta 04) I only get a couple of props added:

<Box
   // these were already added
	receiveShadow
	scale={[1, 1, 1]}
	position={[1, 0, 0]}
	rotation={[0, 0, 0]}

    // these were auto added 
	attachArray={undefined}
	attachObject={undefined}
/>

With these two props added to Box (and also on the Text and Detailed components used elsewhere) the project builds successfully.
Does anyone have an idea what's going on here?

[joshuaellis]

That's weird. Silly question, have you got @types/three installed?

[looeee]

Yes, on my own project.

If I add @types/three to the sandbox then do "add missing attributes", now it just adds the same two as my local project instead of the whole list.

<Box position={[-1.2, 0, 0]} attachArray={undefined} attachObject={undefined} />

[camjackson]

I was just having this same problem of lots of ts errors on basic drei components. I did not have @types/three installed, adding it fixed all the errors for me. Thanks!

[guilleprfc]

I had the same problem and had to use "add missing attributes" to fix it, but after installing @types/three I no longer have to do it and the type error is gone.

[StianIsmar]

Same with me, worked!

[amir-khoshbakht]

same, worked for me

[drcmda]

so odd, attachArray and attachObject are not part of r3f any longer. maybe delete node_modules for once, i think i had something like this in the r3f examples dir when switching between the branches. also keep in mind drei is not 100% compatible yet (due to attach being different). most primitives should work but everything that has either attachObject or attachArray or attachFns will not work. drei being at 8 now was just because it moved up with the current threejs version but it's unrelated to r3fv8.

[looeee]

In case anyone else comes across this, it's resolved since I updated to the latest version of R3F (version 8) and Drei (version 9).