react-dnd-multi-backend looking for cjs on latest version (v4.0.0)

[MilesWells]

My app won't compile because it is looking for CommonJS versions of DnD modules.

Relevant dependencies

"dependencies": {
    "react": "^16.9.0",
    "react-dnd": "^9.4.0",
    "react-dnd-html5-backend": "^9.4.0",
    "react-dnd-multi-backend": "^4.0.0",
    "react-dnd-touch-backend": "^9.4.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "@types/react-dnd-multi-backend": "^4.0.0"
  }

Code

import { DndProvider } from 'react-dnd';
import MultiBackend from 'react-dnd-multi-backend';
import Html5toTouch from 'react-dnd-multi-backend/lib/HTML5toTouch';

<DndProvider backend={MultiBackend} options={Html5toTouch}>
// ...
</DndProvider>

Errors

./node_modules/react-dnd-preview/lib/index.js
Module not found: Can't resolve 'react-dnd-cjs' in '{...}/node_modules/react-dnd-preview/lib'

./node_modules/react-dnd-multi-backend/lib/HTML5toTouch.js
Module not found: Can't resolve 'react-dnd-html5-backend-cjs' in '{...}/node_modules/react-dnd-multi-backend/lib'

./node_modules/react-dnd-multi-backend/lib/HTML5toTouch.js
Module not found: Can't resolve 'react-dnd-touch-backend-cjs' in '{...}/node_modules/react-dnd-multi-backend/lib'

[LouisBrunner]

Hi @MilesWells !
v4 of dnd-multi-backend currently only works with CommonJS. However I have plan to introduce ESM support ASAP. If you can't use CommonJS, I'll recommend you stay on 3.x.x (and corresponding react-dnd versions) until the release of v5.

[LouisBrunner]

I have published a new package, 5.0.0-rc01, using the ESM version of react-dnd.
Each package now includes CommonJS, ESM and UMD builds.

[babalugats76]

I went ahead and put 5.0.0-rc01 into place and everything worked seamlessly with ESM (no CJS). I will keep testing...thanks again...

[LouisBrunner]

@babalugats76 I have now published 5.0.0-rc03 including ESM/CJS/UMD builds, changes requested by @cormacrelf and a new API for <Preview />.
I will do more testing on my side but I am aiming to release it as latest by the end of the week, please tell me if you run into any issue.

[babalugats76]

Thanks @LouisBrunner. I upgraded to 5.0.0-rc03 and have done some preliminary testing. So far, so good. I have a custom DragLayer and preview component, so, unfortunately, I won't be able to test those enhancements. When I began development, I tried Preview, and it worked well, but I was having a hard time figuring out to integrate the use of Preview alongside the non-touch browser ghost, etc. This was probably due to my ignorance :).

This is incredible work and my tool has no chance without it. If I ever get this thing done and out in the wild, it will be in large measure due to your toil. Even though by proxy, you are gonna be helping thousands of kids. Thanks for that!

[dobesv]

Are you planning to release a commonjs version in the future, like react-dnd-multi-backend-cjs to match react-dnd-cjs and friends?

[cormacrelf]

@dobesv I don’t see why it would be worth the effort, poor Louis already does enough. I don’t even know why upstream decided to do it. Even the Jest restriction is solved by mapping to a cjs subdirectory of the main packages.

[dobesv]

Yeah, fair enough. Just that it seems like for us we can only use the -cjs ones. I tried to use version 5 of this package but the react-dnd stuff doesn't seem to work with server-side rendering in node.js. It was using the ems build for some reason. Maybe I'll figure out another solution next time I try, and this one has released version 5.

[LouisBrunner]

@dobesv As @cormacrelf said, I am not planning to release a separate CommonJS package in the near future, however feel free to tell me if there is anything reasonable I can do to improve/help your workflow.

@babalugats76 That's awesome! I would be really interested to know how you integrated the dnd ghost for touch, maybe we can improve the workflow in react-dnd-preview to make it more usable or even the rendering itself (as #5 is tracking, it's not great).