ReactJS useGesture: typeerror set is not a function

Question

I have been trying to get the example working from the useGesture documentation

but I keep getting a typeerror set is not a function error no matter what I try

import './App.css';
import React, {useState} from "react"
import { useSpring, animated } from "react-spring"
import { useDrag } from "react-use-gesture"
import data from './data';

function App() {
  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))

  // Set the drag hook and define component movement based on gesture data
  const bind = useDrag(({ down, movement: [mx, my] }) => {
    set({ x: down ? mx : 0, y: down ? my : 0 })
  })

  // Bind it to a component
  return <animated.div {...bind()} style={{ x, y }} className="box"/>
}

export default App;

My versions are up to date

{
  "name": "gesture-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "react-spring": "^9.0.0",
    "react-use-gesture": "^9.1.3",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I've tried numerous different versions but always get this error. Any ideas?

chriopp · Accepted Answer · 2021-04-02T09:31:53.963

I came around this issue today as well. Obviously the second return value of useSpring now (as installed today) returns the "spring object". Try

function App() {
    const [{ x, y }, spring] = useSpring(() => ({ x: 0, y: 0 }));

    // Set the drag hook and define component movement based on gesture data
    const bind = useDrag(({ down, movement: [mx, my] }) => {
        spring.set({ x: down ? mx : 0, y: down ? my : 0 });
    });

    // Bind it to a component
    return <animated.div {...bind()} style={{ x, y }} className="box" />;
}

Dependencies are

"react-spring": "^9.0.0",
"react-use-gesture": "^9.1.3",

This may not help a lot, with the transition to 9.0.0 there are more changes that have not found their way into the documentation yet. My suggestion is to move to the examples and check out the sandboxes for valid version combinations.

Thank you so much, I banged my head against a wall trying to figure it out. Shame they haven't got this in the documentation. Really appreciate your help — user2771892, Apr 01 '21 at 15:11

ReactJS useGesture: typeerror set is not a function

1 Answers1