Add `exports` to package.json

Author: kacpakCreated Apr 7, 2024Updated Jul 5, 2026

Labelsenhancement

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

javascript

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

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"
+    },
...

Source: atlassian/pragmatic-drag-and-drop

View original on GitHub View discussion on GitHub