@nosferatu500/react-sortable-tree is not compatible with react-dnd@16

[tveryakoff]

Describe the bug

Crashes due to unresolved DragSource import:

 [ERROR] No matching export in "../../node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/react-dnd/dist/index.js" for import "DragSource"

    ../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@nosferatu500/react-sortable-tree/esm/index.js:5:9:
      5 │ import { DragSource, DropTarget, DndContext, DndProvider } from 'react-dnd';
      

To Reproduce

dependencies:

"dependencies": {
    "@sanity/client": "^5.4.2",
    "@sanity/code-input": "^4.1.1",
    "@sanity/color-input": "^3.1.0",
    "@sanity/scheduled-publishing": "^1.2.2",
    "@sanity/vision": "3.17.0",
    "cloudinary": "^1.33.0",
    "lodash": "^4.17.21",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sanity": "3.17.0",
    "sanity-plugin-cloudinary": "1.1.1",
    "sanity-plugin-markdown": "4.1.0",
    "styled-components": "^5.3.11",
  },
  "devDependencies": {
    "@sanity/cli": "^3.16.4",
    "@sanity/eslint-config-studio": "^3.0.1",
    "@sanity/types": "^3.16.4",
    "@swc/cli": "^0.1.62",
    "@swc/core": "^1.3.62",
    "@vitejs/plugin-react": "^4.1.0",
    "typescript": "^4.8.4"
  }

Description

@sanity/hierarchical-document-list has @nosferatu500/react-sortable-tree and "react-dnd": "16.0.1" in dependencies, however @nosferatu500/react-sortable-tree expects react-dnd@14 in peerDependencies, which causes a crash due to failed imports from react-dnd

peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dnd": "14.0.4",
    "react-dom": "^17.0.0 || ^18.0.0"
  }

Expected behavior
Plugin is compatible with [email protected] or has react-dnd@14 in dependencies

Full error log

✘ [ERROR] No matching export in "../../node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/react-dnd/dist/index.js" for import "DragSource"

    ../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@nosferatu500/react-sortable-tree/esm/index.js:5:9:
      5 │ import { DragSource, DropTarget, DndContext, DndProvider } from 'react-dnd';
        ╵          ~~~~~~~~~~

✘ [ERROR] No matching export in "../../node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/react-dnd/dist/index.js" for import "DropTarget"

    ../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@nosferatu500/react-sortable-tree/esm/index.js:5:21:
      5 │ import { DragSource, DropTarget, DndContext, DndProvider } from 'react-dnd';
        ╵                      ~~~~~~~~~~

7:19:51 PM [vite] error while updating dependencies:
Error: Build failed with 2 errors:
../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@nosferatu500/react-sortable-tree/esm/index.js:5:9: ERROR: No matching export in "../../node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/react-dnd/dist/index.js" for import "DragSource"
../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@nosferatu500/react-sortable-tree/esm/index.js:5:21: ERROR: No matching export in "../../node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/react-dnd/dist/index.js" for import "DropTarget"

[lasseaeggen]

If it's OK with your setup and guidelines, you can add shamefully-hoist=true to your Sanity Studio's .npmrc in order to resolve the packages until a fix is provided.
https://pnpm.io/npmrc#shamefully-hoist

You can be more specific than "shamefully" with the other settings mentioned here: https://pnpm.io/npmrc#dependency-hoisting-settings.

[donalffons]

I'm experiencing the same issue. Unfortunately, the proposed fix doesn't seem to do anything in my case.

[donalffons]

Here is what did the trick for me (using pnpm as the package manager and an embedded sanity studio)

In my package.json (in my case, it's a monorepo, so it is at the root level package.json), I added

"pnpm": {
  "overrides": {
    "react-dnd": "^14.0.5",
    "react-dnd-html5-backend": "^14.1.0"
  }
}

This enforces the specified version across all dependencies and sub-dependencies. No need to change settings in the .npmrc.

To me it looks like a better fix would be to fix the version numbers in the package.json of this package. This package seems to be incompatible with versions >14 of react-dnd.