Drag-Drop issues

[mickev36]

Hello,

I installed a bare bones project following the README. Unfortunately, there seems to be an issue with the drag-and-drop : while dragging a piece, it disappears completely, and reappears only when releasing it on a square.

It sometimes kinda works, as the piece is semi-transparent, but the behaviour seems random (moving the same pieces makes it disapeear while dragging again).

Is there any configuration I'm missing ?

EDIT : I've cloned this repo and ran the examples, no issue. So it's probably something related to my project. I've ran a simple create-react-app, but with a typescript template. Could it be linked to typescript ?

EDIT2 : Tried with a vanilla JS create-react-app, same issue. Probably not related to typescript.

[Clariity]

Perhaps it's another factor?

What node version are you using? What OS are you using? What browser are you using?

What version of the package are you downloading? Are you using drag and drop elsewhere that may be interfering?

[mickev36]

I'm using : Node v16.14.0 / npm 8.10.0 I'm on a standard 20.04.4 LTS Ubuntu I've tried firefox 101.0.1 and Chrome, same issue on both.

I've tried to use the "package" folder provided in the examples directly in my project (with file://), and have the same issue. The project is just a bare bones create-react-app, where I only include this lib, so i don't think anything is interfering.

I'm really puzzled, since the example project is working on my machine, and i don't see any difference with a fresh create-react-app.

The only difference I noticed is I use React 18, whereas the example project uses React 17. Maybe something related to react-dnd ?

Please let me know if any more information could be useful

EDIT : I've noticed that in the example project, using "file:" for the react-chessboard dependency is not working : I deleted the "react-chessboard" folder in node_modules and it completely stopped working. That should mean I'm using the same npm installed version in my project than the one installed in the example folder.

[mickev36]

I've tracked down the issue : I've downgraded my bare-bones create-react-app to use React v17. No issue at all. It seems like react-chessboard is not compatible with react 18, at least not the drag & drop.

[Clariity]

Yeah I thought it might be something like that.

I'll see if I can replicate it on my Windows machine once I am home from work, and then notify React DnD, although it hasn't been maintained in a while and doesn't look like it will be :(

Thank you for raising this for me. Hopefully there will be a solution in the future

[mickev36]

Thank you for the quick responses and your work ! You'll be able to replicate it easily by using the standard create-react-app and importing and adding the lib to the project. Unfortunate that React DnD is not maintained anymoyre :-(

Good luck for the fixes :-)

[Clariity]

replicated it on my local, I believe the issue is not with react-dnd but with the react-dnd-multi-backend that I use to enable drag and drop on both desktop and mobile, that is the one I meant that is no longer maintained (last update 10 months ago)

Not really sure its something I can fix unless I were to remake the react dnd backend, or offer multiple split packages, one for desktop, and one for mobile, but that would kind of suck

[mickev36]

Understood, that's unfortunate. I moved to using chessground right now which fits my needs. I'll keep an eye on this repo in the future though. Good luck, hope you'll find a fix !

[Clariity]

@mickev36

I've remembered that we have 2 custom props that may solve your issues for you:

customDndBackend customDndBackendOptions

this allows you to pass in your own DnD backend to handle drag and drop options in the event you can find one that works for your use case

[mickev36]

Thanks for the tip. I've implemented a solution with chessgrounds which fits my needs right now, but I might come back to react-chessboard in the future depending on the direction my project will take. If that's the case, I will try that solution and will keep you updated

[Clariity]

@mickev36 Fixed in 1.2.6

https://github.com/Clariity/react-chessboard/pull/39

[mickev36]

Awesome, thanks, i'll take a look !

[Frosty92]

Hi @Clariity,

I've installed version 1.2.6 of this module but the drag and drop issue seems to persist and is identical to @mickev36. Here are my dependencies: { "@react-chess/chessground": "^1.3.0", "@types/chess.js": "^0.13.2", "chess.js": "^0.13.4", "chessboardjsx": "^2.4.7", "next": "12.2.3", "react": "18.2.0", "react-chessboard": "^1.2.6", "react-dom": "18.2.0" }

Any suggestions ?

[Clariity]

Reopening as I'm able to replicate the bug, and boy is it a weird bug

EDIT: deleted earlier comment as it was incorrect and I've identified the cause

It's to do with how the react app root is rendered, the old way from React 17 works, the new way from React 18 causes the issue

The Old Way

ReactDOM.render(<App />, document.getElementById("root"));

The New Way

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

[Clariity]

I'll need a few days as I'm busy for a few evenings but then I can look into upgrading my react-dnd implementation as it's quite out of date now

[Clariity]

if anyone else wants to give it a go in the mean time then please do, you just need to upgrade react-dnd, react-dnd-html5-backend and react-dnd-touch-backend, and then fix the DragLayer implementation

[Clariity]

https://react-dnd.github.io/react-dnd/docs/tutorial#add-a-drag-preview-image

[Clariity]

@Frosty92 @mickev36

Actually fixed it now in 1.3.0 :))

Took a while but I got there

[Frosty92]

Hi @Clariity , I tested it and it's working - thank you so much!