🐛 BUG: Attemping to render @use-gesture/react hook results in TypeError while the same code renders correctly in other build systems

[looeee]

EDIT: Originally reported this as an issue with the package leva, however after looking a bit deeper it's a problem with @use-gesture/react. Updated issue details and title to reflect this.

Quick checklist

• I am using the latest version of Snowpack and all plugins.

What package manager are you using?

Yarn on WSL and Codesandbox in Chrome

What operating system are you using?

WSL and Codesandbox

Describe the bug

Attempting to render a very simple react app with a @use-gesture/react useDrag hook fails with Unhandled Runtime Error: Uncaught TypeError: Cannot convert undefined or null to object. This can demonstrated with an app containing this index.jsx:

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
    });
  });

  return (
    <h1 {...bind()} style={style}>
      TEST
    </h1>
  );
};

render(<App />, document.getElementById("root"));

The same index.jsx and same packages running on CRA correctly render the app.

This can also be demonstrated on codesandbox, links below.

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

Steps to reproduce

1. Open this sandbox
2. Alternatively create a local react project with this index.jsx described above.

Compare this to (a) this sandbox (which uses the default codesandbox react template) or a local CRA with the same index.tsx. You will not get the error and the word Test can be dragged around.

Package versions used:

  "dependencies": {
    "@use-gesture/react": "10.2.6",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "prettier": "^2.2.1",
    "snowpack": "^3.8.8",
    "@snowpack/plugin-react-refresh": "*"
  }

Link to minimal reproducible example (optional)

https://codesandbox.io/s/react-snowpack-forked-o6rhl6?file=/src/index.jsx:0-555