webpack/esm/nodeNext: '@use-gesture/core/utils' contains conflicting star exports for the name '__esModule'

[tom2strobl]

Describe the bug
In my electron app I went all-in on ESM and use webpack@5.95.0 to bundle typescript@5.6.3 code esm-style using "type": "module" and the following webpack config (only the relevant part):

{
  "output": {
    "library": {
      "type": "module"
    },
    "chunkFormat": "module",
    "module": true
  },
  "experiments": {
    "topLevelAwait": true,
    "outputModule": true
  }
}

and the following tsconfig.json compilerOptions:

{
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "moduleDetection": "force",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "lib": ["DOM", "ESNext"],
    "target": "ES2022",
    "declaration": true,
    "declarationMap": true,
    "jsx": "react-jsx",
    "strict": true,
    "pretty": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "allowJs": false
  }

Note that I have to use NodeNext because I'm using ESM on both the main thread (node.js) and the renderer (browser).

Sandbox or Video

I've made a minimal reproduction repo:
https://github.com/tom2strobl/usegesture-webpack-nodenext

Maybe https://github.com/arethetypeswrong/arethetypeswrong.github.io helps here? I think it's just a matter of changing exports.

Afaik usage of module for example is deprecated:

use-gesture/packages/react/package.json

Line 23 in c779631

"module": "dist/use-gesture-react.esm.js",

in favor of an export map (this for example is the one from fuse-js):

{
  "exports": {
    ".": {
      "types": "./dist/fuse.d.ts",
      "import": "./dist/fuse.mjs",
      "require": "./dist/fuse.cjs"
    },
    "./min": {
      "types": "./dist/fuse.d.ts",
      "import": "./dist/fuse.min.mjs",
      "require": "./dist/fuse.min.cjs"
    }
  }
}

Information:

• Use Gesture version: v10.3.1
• Device: MacBook M1 Max
• OS: MacOS 15.0.1 (24A348)
• Browser: Chromium V8 in Electron

Checklist:

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

[tom2strobl]

Since this repository is already dead for a year I went ahead and patched the issue for me. Posting it here in case somebody else stumbles upon the same thing.

Basically @use-gesture/react/dist/use-gesture-react.esm.js has:

export * from '@use-gesture/core/actions';
export * from '@use-gesture/core/utils';

@use-gesture/core/utils exports from maths-0ab39ae9.esm.js
@use-gesture/core/actions also imports from maths-0ab39ae9.esm.js resulting in the error.

So since I'm using yarn v3 I ran

yarn patch @use-gesture/react

edited the @use-gesture/react/dist/use-gesture-react.esm.js file to remove the the utils exports, since I don't need it. I also edited the declatations file to not export it to make sure the types are in sync.

The warning is now gone.