Comments (18)
Actually fixed it now in 1.3.0 :))
Took a while but I got there
from react-chessboard.
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?
from react-chessboard.
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.
from react-chessboard.
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.
from react-chessboard.
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
from react-chessboard.
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 :-)
from react-chessboard.
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
from react-chessboard.
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 !
from react-chessboard.
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
from react-chessboard.
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
from react-chessboard.
@mickev36 Fixed in 1.2.6
from react-chessboard.
Awesome, thanks, i'll take a look !
from react-chessboard.
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 ?
from react-chessboard.
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>
);
from react-chessboard.
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
from react-chessboard.
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
from react-chessboard.
https://react-dnd.github.io/react-dnd/docs/tutorial#add-a-drag-preview-image
from react-chessboard.
Hi @Clariity , I tested it and it's working - thank you so much!
from react-chessboard.
Related Issues (20)
- Redux Issue . Next JS 13 HOT 6
- Laggy when render multiple boards HOT 1
- Is it possible to disable field labels? HOT 2
- Positioning a shape while dragging HOT 21
- Animation looks weird when position and boardOrientation are changed at the same time HOT 6
- Animation goes wrong way when board is flipped HOT 2
- How can I make one black pawn a star, another black pawn, for example, an ice cream, replace not all pawns at once, but only one ? HOT 1
- areArrowsAllowed={false} doesn't work HOT 3
- onPromotionCheck for squareClick HOT 4
- Animation skips after failed drag move HOT 1
- How i can add pieces from outside the board ? HOT 2
- Feature Request: Add Circle Annotations to Squares HOT 3
- Positioning issue if FEN string changes completely HOT 7
- Premove back to existing premove square causes piece to disappear HOT 5
- Board resets to previous state despite value of `position` HOT 8
- Got error when run in dev environment HOT 2
- showPromotionDialog prop not working as expected HOT 1
- Use mixins in contrast to inline css HOT 1
- Allow for customization of every unique piece not just the different colored pieces. HOT 3
- customArrows props creates infinite loops. HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-chessboard.