Type errors when adding {...bind()} to a component in three.js with r3f.

[wileyknight]

I am getting linting errors using:

<a.group {...spring} {...bind()}>

I get the following error at 'a.group' :

Type '{ children: Element; onMouseDown?: MouseEventHandler<Element>; onMouseDownCapture?: MouseEventHandler<Element>; ... 47 more ...; position: SpringValue<...>; }' is not assignable to type 'AnimatedProps<Omit<Node<any, any>, NonFunctionKeys<{ position?: any; up?: any; scale?: any; rotation?: any; matrix?: any; quaternion?: any; layers?: any; dispose?: () => void; }>> & { ...; } & EventHandlers & { ...; }>'.
  Types of property 'onClick' are incompatible.
    Type 'MouseEventHandler<Element>' is not assignable to type '(event: ThreeEvent<MouseEvent>) => void'.
      Types of parameters 'event' and 'event' are incompatible.
        Type 'MouseEvent & IntesectionEvent<MouseEvent>' is missing the following properties from type 'MouseEvent<Element, MouseEvent>': nativeEvent, isDefaultPrevented, isPropagationStopped, persistts(2322)

If I get rid of bind() from the component it works fine but documentation doesn't show that in your git examples or on your sample transform code from the website.

// this works and gives no linting errors
<a.group {...spring} >

// this also works but with linting errors in typescript
<a.group {...spring} {...bind()}>

Your website example also shows using an 'a3f' prefix instead of 'a' but I can't find a proper import for that.

// can't get this from the samples on the website under transform to run at all
// https://use-gesture.netlify.app/docs/options/ 
<a3f.mesh {...bind()} {...spring}>

Any insight would be nice or I can just use it without a {...bind()}

Thank you.

[dbismut]

Hi, what package versions are you using?

[wileyknight]

Here is my package json.

    "@react-spring/three": "^9.1.1",
    "@react-three/drei": "^2.2.10",
    "@react-three/fiber": "^6.0.10",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "lodash": "^4.17.20",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "react-use-gesture": "^9.0.2",
    "three": "0.127.0",
    "typescript": "^4.2.4",
    "web-vitals": "^0.2.4",
    "zustand": "^3.4.1"

[dbismut]

First things first, try to update react-use-gesture to its latest published version (9.1.3).

[wileyknight]

Sure thing. It's updated. no change.

[dbismut]

It's possible that this is an error with r3f — @drcmda any ideas?

[janroesler]

Hey,

i have a similar problem and have made a CodeSandbox example for it https://codesandbox.io/s/suspicious-babbage-bxf72?file=/src/index.tsx

[dbismut]

Hey sorry I let that discussion stall. But essentially this is because r3f objects handlers aren't compatible with React native handler types because r3f augments the Event type with additional attributes. I'm not sure how to solve this unless I create a package such as @use-gesture/r3f with proper types.

At the moment the simple fix is doing {... bind() as any}