TypeScript: Cannot find module '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter'

[obecker]

When trying to experiment with pragmatic-drag-and-drop I stumbled upon this (what seems to me very basic) problem.

Environment: Node v21.7.3, NPM 10.5.2

To reproduce the issue I started a new vite project using the react-swc-ts template:

npm create vite@latest dnd-example -- --template react-swc-ts
cd dnd-example
npm install

The created project uses TypeScript ^5.2.2 and vite ^5.2.0.

Then I installed the pragmatic-drag-and-drop dependency:

npm install @atlaskit/pragmatic-drag-and-drop

and added the following import to the generated src/App.tsx file:

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

Running

npm run build

then prints this error message:

src/App.tsx:5:25 - error TS2307: Cannot find module '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter' or its corresponding type declarations.

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

Do I need to separately install some types for pragmatic-drag-and-drop?

[alexreardon]

Good news, you just need to update your import path

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

Did your editor make this import for you? If so, which one? I wonder if we could do more to help the editor choose the right import

[obecker]

Oh my 🤦‍♂️ ... thanks!

Yes, the import was created by IntelliJ Ultimate.