-
Notifications
You must be signed in to change notification settings - Fork 168
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add exports
to package.json
#27
Comments
cc @ReDrUm |
👋 Thank you for raising this.
Standalone vite demo on Stackblitz
|
exports
to package.json
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. |
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'; |
Hi, I'm having the same issue, I'm currently using 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 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"
+ }
+ }
}
|
I have the same problem, here is an example repo: |
Same here with SvelteKit:
|
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 importUnfortunately 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:
The text was updated successfully, but these errors were encountered: