{...bind()} from useDrag is not callable

[ClemensDinkel]

From a div I call the bind() function provided by the useDrag hook as follows.

<div className="w-full overflow-y-auto touch-none" {...bind()}>

It works as it is supposed to, but typescript isn't happy about what I'm doing. It tells me the following:

This is the definition of the function in which I use the useDrag hook:

const bind = useDrag(
    ({ swipe, last }: { swipe: [SwipeDirection, SwipeDirection]; last: boolean }) => {
      if (last && swipe[1] === -1) table.nextPage();
      if (last && swipe[1] === 1) table.previousPage();
    },
  );

I understand why typescript throws counts this as a problem. When I look at the interface of my bind function its stated as void | ((...args: any[]) => ReactDOMAttributes) . Void isn't callable, yes. By looking at the interface of the useDrag hook I can see that when Config["target"] extends object the return type is defined as void.
As you can see I don't provide a Config so I don't know what Config typescript evaluates here, but it seems to include a target property of type object and thus I'm getting void as return type, which then causes typescript to complain.

The problem seems to be project specific. I've isolated this in a mvp and in it typescript was content.

So I don't really know if that's a bug or if it is somehow related to our project structure. It seems to me that however you have put this evaluation of the return type to void there for a reason.

I can circumvent this issue by calling useDrag like that useDrag<PointerEvent | MouseEvent | TouchEvent | KeyboardEvent, object>, however this doesn't feel like a proper fix and I'd like to understand what's wrong.

Information:

• Use Gesture version: v10.2.22
• Device: Laptop PC
• OS: Windows 11
• Browser: Chrome

Checklist:

• [ x ] I've read the documentation.
• [ x ] If this is an issue with drag, I've tried setting touch-action: none to the draggable element.

[dbismut]

Hey, please provide a sandbox or GitHub repro. Thanks!

[dbismut]

I had a closer look and it might be because of your tsconfig and strict null checks. Can you paste it here?

[ClemensDinkel]

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "assumeChangesOnlyAffectDirectDependencies": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "exactOptionalPropertyTypes": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "inlineSources": false,
    "isolatedModules": true,
    "module": "ESNext",
    "moduleResolution": "Node16",
    "noEmit": false,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noPropertyAccessFromIndexSignature": false,
    "noUncheckedIndexedAccess": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveWatchOutput": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "strictNullChecks": true,
    "target": "ESNext"
  },
  "display": "Typescript base compiler options, ESNext and Node16 moduleResolution",
  "exclude": ["node_modules"]
}

This is the underlying base json which is extended 2 times (we have a monorepo structure)
The extensions (in case they're important) are:

(react.json)

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "React Typescript/Javascript code for bundling/transpiling with Vite/Esbuild",
  "extends": "./base.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["DOM", "DOM.Iterable", "ESNext"]
  }
}

(project.json)

{
  "compilerOptions": {
    "baseUrl": "src",
    "declaration": false,
    "declarationMap": false,
    "noEmit": true,
    "paths": { "$/*": ["./*"] },
    "tsBuildInfoFile": ".tsbuildinfo",
    "types": ["vite/client"]
  },
  "extends": "@enso/tsconfig/react.json",
  "include": ["src", "vite.config.ts", "bundleSirv.cts", "convert-locale.ts", "convert-signals.ts"]
}

Your assumption might be right. We have strict null checks.

[gunters63]

One workaround would be to pass {} or undefined as the options parameter to useDrag

[gunters63]

The real reason was Typescript type inference was not working correctly with moduleResolution Node16 because of missing package exports in the core package.

I made a PR to fix this: #560

[dbismut]

Should be fixed now!