Add `exports` to package.json

[kacpak]

Hi,

I wanted to play around with the library, so I created a fresh Vite project npm create vite with React & TypeScript and started with such import

import { draggable } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";

Unfortunately it was not resolved. I dug into the package.json and from what I saw only the main entry points are exposed (which contain nothing, since as per documentation we should import individual files). Adding proper "exports" field to package.json with all files in dist/(esm|cjs|types) fixed the issue for me, but I'm now relying on patch-package lib and a git diff to keep it working. This is the diff I applied: @atlaskit+pragmatic-drag-and-drop+1.1.3.patch and a preview of the file:

diff --git a/node_modules/@atlaskit/pragmatic-drag-and-drop/package.json b/node_modules/@atlaskit/pragmatic-drag-and-drop/package.json
index b270896..9454cc2 100644
--- a/node_modules/@atlaskit/pragmatic-drag-and-drop/package.json
+++ b/node_modules/@atlaskit/pragmatic-drag-and-drop/package.json
@@ -17,6 +17,340 @@
       ]
     }
   },
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    "./": {
+      "default": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./internal-types": {
+      "default": "./dist/esm/internal-types.js",
+      "require": "./dist/cjs/internal-types.js",
+      "types": "./dist/types/internal-types.d.ts"
+    },
+    "./adapter/element-adapter-native-data-key": {
+      "default": "./dist/esm/adapter/element-adapter-native-data-key.js",
+      "require": "./dist/cjs/adapter/element-adapter-native-data-key.js",
+      "types": "./dist/types/adapter/element-adapter-native-data-key.d.ts"
+    },
+    "./adapter/element-adapter": {
+      "default": "./dist/esm/adapter/element-adapter.js",
+      "require": "./dist/cjs/adapter/element-adapter.js",
+      "types": "./dist/types/adapter/element-adapter.d.ts"
+    },
+    "./adapter/external-adapter": {
+      "default": "./dist/esm/adapter/external-adapter.js",
+      "require": "./dist/cjs/adapter/external-adapter.js",
+      "types": "./dist/types/adapter/external-adapter.d.ts"
+    },
+    "./adapter/text-selection-adapter": {
+      "default": "./dist/esm/adapter/text-selection-adapter.js",
+      "require": "./dist/cjs/adapter/text-selection-adapter.js",
+      "types": "./dist/types/adapter/text-selection-adapter.d.ts"
+    },
+    "./entry-point/cancel-unhandled": {
+      "default": "./dist/esm/entry-point/cancel-unhandled.js",
+      "require": "./dist/cjs/entry-point/cancel-unhandled.js",
+      "types": "./dist/types/entry-point/cancel-unhandled.d.ts"
+    },
+    "./entry-point/combine": {
+      "default": "./dist/esm/entry-point/combine.js",
+      "require": "./dist/cjs/entry-point/combine.js",
+      "types": "./dist/types/entry-point/combine.d.ts"
+    },
+    "./entry-point/once": {
+      "default": "./dist/esm/entry-point/once.js",
+      "require": "./dist/cjs/entry-point/once.js",
+      "types": "./dist/types/entry-point/once.d.ts"
+    },
+    "./entry-point/prevent-unhandled": {
+      "default": "./dist/esm/entry-point/prevent-unhandled.js",
+      "require": "./dist/cjs/entry-point/prevent-unhandled.js",
+      "types": "./dist/types/entry-point/prevent-unhandled.d.ts"
+    },
...

[alexreardon]

cc @ReDrUm

[alexreardon]

👋 Thank you for raising this.

1. We plan on adding exports to all packages soon
2. It looks like you have got yourself unstuck for now with patch-package, which is awesome
3. I was unable to replicate your issue 🤔

Standalone vite demo on Stackblitz

vite/5.2.8 linux-x64 node-v18.18.0

[StefKors]

For me the issue was that when my IDE (WebStorm) added the import automatically it got imported as:

import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';

while the correct import should be:

import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

It might still require the same fix however it took me an embarrassing long time to realize the import path was wrong.

[buzzie-bee]

To add some further examples where VSCode by default imported from incorrect paths:

import { Instruction, ItemMode } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/dist/types/adapter/element-adapter';
import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/dist/types/entry-point/element/pointer-outside-of-preview';
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/dist/types/entry-point/element/set-custom-native-drag-preview';
import { combine } from '@atlaskit/pragmatic-drag-and-drop/dist/types/public-utils/combine';

Should instead be:

import { Instruction, ItemMode } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';

[andreslemusm]

Hi, I'm having the same issue, I'm currently using Remix with Vite and deploying on Vercel.

The error logs are the following:

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/var/task/node_modules/@atlaskit/pragmatic-drag-and-drop/element/adapter' is not supported resolving ES modules imported from /var/task/build/server/nodejs-eyJtYXhEdXJhdGlvbiI6MzAsInJ1bnRpbWUiOiJub2RlanMifQ/index.js
Did you mean to import "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js"?
at finalizeResolution (node:internal/modules/esm/resolve:263:11)
at moduleResolve (node:internal/modules/esm/resolve:937:10)
at moduleResolveWithNodePath (node:internal/modules/esm/resolve:1161:14)
at defaultResolve (node:internal/modules/esm/resolve:1204:79)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'ERR_UNSUPPORTED_DIR_IMPORT',
url: 'file:///var/task/node_modules/@atlaskit/pragmatic-drag-and-drop/element/adapter'
}

I was able to solve it on my own with patch-package and adding my own exports in the main package.json file of @atlaskit/pragmatic-drag-and-drop and @atlaskit/pragmatic-drag-and-drop-hitbox

diff --git a/node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/package.json b/node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/package.json
index d81ee4f..b06574e 100644
--- a/node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/package.json
+++ b/node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/package.json
@@ -73,5 +73,17 @@
     }
   },
   "homepage": "https://atlassian.design/components/pragmatic-drag-and-drop/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
+  "exports": {
+    "./closest-edge": {
+      "default": "./dist/esm/closest-edge.js",
+      "require": "./dist/cjs/closest-edge.js",
+      "types": "./dist/types/closest-edge.d.ts"
+    },
+    "./util/reorder-with-edge": {
+      "default": "./dist/esm/reorder-with-edge.js",
+      "require": "./dist/cjs/reorder-with-edge.js",
+      "types": "./dist/types/reorder-with-edge.d.ts"
+    }
+  }
 }

diff --git a/node_modules/@atlaskit/pragmatic-drag-and-drop/package.json b/node_modules/@atlaskit/pragmatic-drag-and-drop/package.json
index 2cfe9e8..1b95860 100644
--- a/node_modules/@atlaskit/pragmatic-drag-and-drop/package.json
+++ b/node_modules/@atlaskit/pragmatic-drag-and-drop/package.json
@@ -102,5 +102,32 @@
 			]
 		}
 	},
-	"homepage": "https://atlassian.design/components/pragmatic-drag-and-drop/"
+	"homepage": "https://atlassian.design/components/pragmatic-drag-and-drop/",
+	"exports": {
+		"./element/adapter": {
+			"default": "./dist/esm/entry-point/element/adapter.js",
+			"require": "./dist/cjs/entry-point/element/adapter.js",
+			"types": "./dist/types/entry-point/element/adapter.d.ts"
+		},
+		"./element/set-custom-native-drag-preview": {
+			"default": "./dist/esm/entry-point/element/set-custom-native-drag-preview.js",
+			"require": "./dist/cjs/entry-point/element/set-custom-native-drag-preview.js",
+			"types": "./dist/types/entry-point/element/set-custom-native-drag-preview.d.ts"
+		},
+		"./element/pointer-outside-of-preview": {
+			"default": "./dist/esm/entry-point/element/pointer-outside-of-preview.js",
+			"require": "./dist/cjs/entry-point/element/pointer-outside-of-preview.js",
+			"types": "./dist/types/entry-point/element/pointer-outside-of-preview.d.ts"
+		},
+		"./combine": {
+			"default": "./dist/esm/entry-point/combine.js",
+			"require": "./dist/cjs/entry-point/combine.js",
+			"types": "./dist/types/entry-point/combine.d.ts"
+		},
+		"./reorder": {
+			"default": "./dist/esm/entry-point/reorder.js",
+			"require": "./dist/cjs/entry-point/reorder.js",
+			"types": "./dist/types/entry-point/reorder.d.ts"
+		}
+	}
 }

[strackfeldt]

I have the same problem, here is an example repo:

https://github.com/strackfeldt/remix-pdnd

[macmillen]

Same here with SvelteKit:

[preview] Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/root/turbo/projects/shop-builder/node_modules/@atlaskit/pragmatic-drag-and-drop/combine' is not supported resolving ES modules imported from /root/turbo/projects/shop-builder/.svelte-kit/output/server/entries/pages/__locale__/shops/_shopId_/editor/_layout.svelte.js
[preview] Did you mean to import @atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js?

[Keagel]

Facing exactly the same issue (on 1.2.1) using SvelteKit on Vercel and none of the patches actually seem to resolve anything. Works fine locally and it seems the issue is only present during SSR on Vercel. Navigating from an already loaded page doesn't cause the issue, only hard reloads. 1.2.3 is even worse as it completely crashes the serverless function:

Unhandled Rejection: /var/task/node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/combine.js:1
export { combine } from '../public-utils/combine';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at /opt/rust/nodejs.js:1:11506
    at Function.Zt (/opt/rust/nodejs.js:1:11879)
    at Y.e.<computed>.Z._load (/opt/rust/nodejs.js:1:11476)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
Node.js process exited with exit status: 128. The logs above can help with debugging the issue.

[dondeestanmispantalones]

For anyone like me that doesn't want to mess around with package.json but still wants to use this library, I just copy+pasted the dist/esm folder from node_modules into my project and used it that way. Just need to install @babel/runtime, bind-event-listener, and raf-schd. I'm using SvelteKit btw.

// import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
// import {
// 	attachClosestEdge,
// 	extractClosestEdge
// } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'
import { dropTargetForElements } from '../../libraries/pragmatic-drag-and-drop/entry-point/element/adapter.js'
import {
  attachClosestEdge,
  extractClosestEdge
} from '../../libraries/pragmatic-drag-and-drop-hitbox/closest-edge.js'

[macmillen]

Are there any updates on this? I replaced our previous dnd solution with this library but I still can't merge because of this issue.

[alexreardon]

• I've been using pragmatic drag and drop with vite for a while 🤔
• All our packages now have exports fields
• It looks like there is an issue with SveltKit compat https://github.com/atlassian/pragmatic-drag-and-drop/issues/27#issuecomment-2256665760 #107

[strackfeldt]

I have the same problem, here is an example repo:

https://github.com/strackfeldt/remix-pdnd

This is not svelte specific, happens in remix as well, but is seem to only be happening when using ssr