upgrade to r3f 8 results in requiring to define properties attachArray and attachObject as undefined

[oveddan]

I've just upgraded r3f from v7.0.15 to v8.0.8

I'm also using @react-three/drei v7.11.0 and @react-three/flex v0.7.0 pretty extensively.

With this upgrade to r3f v8, if I don't define attachArray={undefined} attachObject={undefined} to many components in those libs, such as <Text /> and <Box /> or <Flex /> I get a typescript error:

Type '{ children: string | null; color: string; outlineColor: string; outlineWidth: number; anchorX: "center"; anchorY: "middle"; font: string; fontSize: number; visible: boolean | undefined; }' is missing the following properties from type 'Pick<Omit<ExtendedColors<Overwrite<Partial<Mesh<BufferGeometry, Material | Material[]>>, NodeProps<Mesh<BufferGeometry, Material | Material[]>, typeof Mesh>>>, NonFunctionKeys<...>> & { ...; } & EventHandlers & { ...; }, "name" | ... 110 more ... | "debugSDF">': attachArray, attachObject

This happens for Box Flex Text and Billboard among others

For example this gives that error:

import { Text } from "@react-three/drei";

<Text>
  Some Text Here
</Text>

This does not:

<Text
  attachArray={undefined}
  attachObject={undefined}
>
  Some Text Here
</Text>

I'm using typescript v4.3.5

[CodyJasonBennett]

You'll need to update Drei to v9 to use the unified attach API.

[oveddan]

got it - what about for Flex? I'm not using attach there at all, but this upgrade requires to define those props as undefined.

[CodyJasonBennett]

TypeScript is telling you that because of old or incompatible types. If upgrading your versions doesn't help, I'd raise an issue there to update their TS definitions or usage of attach.