Attempting to render useDrag hook in Snowpack results in a TypeError but works in other build systems

[looeee]

Attempting to render useDrag hook in Snowpack results in a TypeError. The same code in CRA or standard Codesand react template renders correctly.

Codesandbox with snowpack: error
Standard react codesandbox: works

import { render } from "react-dom";
import React from "react";
import { useDrag } from "@use-gesture/react";

const App = () => {
  const [style, setStyle] = React.useState({
    position: "absolute",
    touchAction: "none",
    left: 0,
    top: 0
  });
  const bind = useDrag(({ down, movement: [mx, my] }) => {
    setStyle({
      position: "absolute",
      touchAction: "none",
      left: mx,
      top: my
    });
  });

Result:

Expected result (as seen with CRA):
The word "Test" should appear and can be dragged around with the mouse.

Full error:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at resolveWith (@use-gesture.core.v10.2.6.js:573:40)
    at parse (@use-gesture.core.v10.2.6.js:618:27)
    at Controller.applyConfig (@use-gesture.core.v10.2.6.js:738:19)
    at useRecognizers (@use-gesture.react.v10.2.6.js:11:8)
    at useDrag (@use-gesture.react.v10.2.6.js:26:10)
    at App (index.js:36:16)
    at renderWithHooks (react-dom.v17.0.2.js:14989:18)
    at mountIndeterminateComponent (react-dom.v17.0.2.js:17815:13)
    at beginWork (react-dom.v17.0.2.js:19053:16)
resolveWith @ @use-gesture.core.v10.2.6.js:573
parse @ @use-gesture.core.v10.2.6.js:618
applyConfig @ @use-gesture.core.v10.2.6.js:738
useRecognizers @ @use-gesture.react.v10.2.6.js:11
useDrag @ @use-gesture.react.v10.2.6.js:26
App @ index.js:36
renderWithHooks @ react-dom.v17.0.2.js:14989
mountIndeterminateComponent @ react-dom.v17.0.2.js:17815
beginWork @ react-dom.v17.0.2.js:19053
callCallback @ react-dom.v17.0.2.js:3952
invokeGuardedCallbackDev @ react-dom.v17.0.2.js:4001
invokeGuardedCallback @ react-dom.v17.0.2.js:4063
beginWork$1 @ react-dom.v17.0.2.js:23957
performUnitOfWork @ react-dom.v17.0.2.js:22769
workLoopSync @ react-dom.v17.0.2.js:22700
renderRootSync @ react-dom.v17.0.2.js:22663
performSyncWorkOnRoot @ react-dom.v17.0.2.js:22286
scheduleUpdateOnFiber @ react-dom.v17.0.2.js:21874
updateContainer @ react-dom.v17.0.2.js:25475
(anonymous) @ react-dom.v17.0.2.js:26010
unbatchedUpdates @ react-dom.v17.0.2.js:22424
legacyRenderSubtreeIntoContainer @ react-dom.v17.0.2.js:26009
render @ react-dom.v17.0.2.js:26092
(anonymous) @ index.js:57
client-hook-6.js:1 The above error occurred in the <App> component:

    at App (https://o6rhl6.sse.codesandbox.io/dist/index.js:30:35)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
r.<computed> @ client-hook-6.js:1
logCapturedError @ react-dom.v17.0.2.js:20089
update.callback @ react-dom.v17.0.2.js:20117
callCallback @ react-dom.v17.0.2.js:12322
commitUpdateQueue @ react-dom.v17.0.2.js:12343
commitLifeCycles @ react-dom.v17.0.2.js:20735
commitLayoutEffects @ react-dom.v17.0.2.js:23419
callCallback @ react-dom.v17.0.2.js:3952
invokeGuardedCallbackDev @ react-dom.v17.0.2.js:4001
invokeGuardedCallback @ react-dom.v17.0.2.js:4063
commitRootImpl @ react-dom.v17.0.2.js:23144
unstable_runWithPriority @ scheduler.v0.20.2.js:448
runWithPriority$1 @ react-dom.v17.0.2.js:11280
commitRoot @ react-dom.v17.0.2.js:22983
performSyncWorkOnRoot @ react-dom.v17.0.2.js:22322
scheduleUpdateOnFiber @ react-dom.v17.0.2.js:21874
updateContainer @ react-dom.v17.0.2.js:25475
(anonymous) @ react-dom.v17.0.2.js:26010
unbatchedUpdates @ react-dom.v17.0.2.js:22424
legacyRenderSubtreeIntoContainer @ react-dom.v17.0.2.js:26009
render @ react-dom.v17.0.2.js:26092
(anonymous) @ index.js:57
@use-gesture.core.v10.2.6.js:573 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at resolveWith (@use-gesture.core.v10.2.6.js:573:40)
    at parse (@use-gesture.core.v10.2.6.js:618:27)
    at Controller.applyConfig (@use-gesture.core.v10.2.6.js:738:19)
    at useRecognizers (@use-gesture.react.v10.2.6.js:11:8)
    at useDrag (@use-gesture.react.v10.2.6.js:26:10)
    at App (index.js:36:16)
    at renderWithHooks (react-dom.v17.0.2.js:14989:18)
    at mountIndeterminateComponent (react-dom.v17.0.2.js:17815:13)
    at beginWork (react-dom.v17.0.2.js:19053:16)
resolveWith @ @use-gesture.core.v10.2.6.js:573
parse @ @use-gesture.core.v10.2.6.js:618
applyConfig @ @use-gesture.core.v10.2.6.js:738
useRecognizers @ @use-gesture.react.v10.2.6.js:11
useDrag @ @use-gesture.react.v10.2.6.js:26
App @ index.js:36
renderWithHooks @ react-dom.v17.0.2.js:14989
mountIndeterminateComponent @ react-dom.v17.0.2.js:17815
beginWork @ react-dom.v17.0.2.js:19053
callCallback @ react-dom.v17.0.2.js:3952
invokeGuardedCallbackDev @ react-dom.v17.0.2.js:4001
invokeGuardedCallback @ react-dom.v17.0.2.js:4063
beginWork$1 @ react-dom.v17.0.2.js:23957
performUnitOfWork @ react-dom.v17.0.2.js:22769
workLoopSync @ react-dom.v17.0.2.js:22700
renderRootSync @ react-dom.v17.0.2.js:22663
performSyncWorkOnRoot @ react-dom.v17.0.2.js:22286
scheduleUpdateOnFiber @ react-dom.v17.0.2.js:21874
updateContainer @ react-dom.v17.0.2.js:25475
(anonymous) @ react-dom.v17.0.2.js:26010
unbatchedUpdates @ react-dom.v17.0.2.js:22424
legacyRenderSubtreeIntoContainer @ react-dom.v17.0.2.js:26009
render @ react-dom.v17.0.2.js:26092
(anonymous) @ index.js:57

Also reported on snowpack repo: FredKSchott/snowpack#3878

[dbismut]

Hey @looeee thanks for the detailed report. I'll have a look as soon as I can.

[dbismut]

Damn Snowpack is hard to debug, no wonder why I ended up using Vite for the demo folder... I have no idea why this fails, especially since it builds properly. Since I cannot manage to integrate Snowpack as a package in @use-gesture monorepo with preconstruct, I'm not sure I'll have the patience to fix this any time soon. As far as I'm concerned, this is for Snowpack to solve.

[looeee]

Yeah it's the first time I've used Snowpack for a project and I'm definitely on the fence - I've had quite a few weird issues, although this is the first deal breaker. I'll try Vite if it can't be easily resolved.

I switched to Snowpack after a frustrating couple of hours trying to get CRA to load WASM with the correct mimetype. Snowpack solved that problem, but caused this one. Feels like I'm playing build system whackamole here 😖

As far as I'm concerned, this is for Snowpack to solve.

Yeah I think it's fine to let them debug this first. I posted here too in case they discovered something that needs to be changed in this library. Thanks for taking a look, I appreciate it.

[looeee]

Hey, since there's been no response over on Snowpack (and hardly any activity on their repo at all) for a week, I'll close this issue for now.

I'll report back here if they respond with anything useful and we can reopen this if necessary.

[jpwhitaker]

Hey @looeee I'm running to the same issue with Sandpack. Did you ever figure out a workaround?

[jpwhitaker]

(trying to add leva to a Sandpack sandbox and it breaks with the same useGesture error.)