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';