use-gesture
use-gesture copied to clipboard
webpack/esm/nodeNext: '@use-gesture/core/utils' contains conflicting star exports for the name '__esModule'
Describe the bug
In my electron app I went all-in on ESM and use [email protected] to bundle [email protected] 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:
https://github.com/pmndrs/use-gesture/blob/c779631aa05959638dee81b9a25fb1299a7467f6/packages/react/package.json#L23
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:
- [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.