Drag and drop does not work in the tutorial

eschiebel commented 4 months ago

Describe the bug I created the tutorial app and when I get to "At this point, you could refresh the page and you would be able to drag stuff around.", nothing drags, nothing gets the move cursor as shown in the animated image in the document.

To Reproduce

create a craftjs-tutorial app using create-react-app
follow the steps in https://craft.js.org/docs/guides/basic-tutorial
when you get to where drag and drop should work, it doesn't

Expected behavior The app I created should work as described in the tutorial

Screenshots If applicable, add screenshots to help explain your problem.

Additional context

I had to change any reference to @material-ui/core to @mui/material since the former has been deprecated and cannot be installed.
as you work through the tutorial, the code for each of the files changes even though changes being made are generally adding lines (e.g. compare what's returned from the App in pages/index.js at the "putting it all together" point in the tutorial to what's at https://craft.js.org/docs/guides/basic-tutorial#setup

Your environment

Software	Version(s)
craft.js	0.2.5
React	18.3.1 (and I also tried 16.14.0 and got the same result)
TypeScript	4.9.5 (and tried 5.3.2 with React 16)
Browser	chrome 124.0.6367.156
npm/Yarn	8.19.4
Operating System	MacOS Ventura 13.6.3

eschiebel commented 4 months ago

I also tried the pre-built tutorial at https://github.com/prevwong/craft.js/blob/main/examples/basic and

does not build with npm and requires yarn for the workspace features
yarn build fails with multiple Error: Unable to resolve path to module '@craftjs/core' errors.

EDIT: I got it to work using yarn build:all from the root directory.

eschiebel commented 4 months ago

I got my version of the tutorial working by using the deprecated @material-ui/core, though I do not understand why dnd does not work with @mui/material or my company's UI component library.

prevwong commented 4 months ago

I just created a demo with the latest version of @mui/material and it seems to work fine: https://stackblitz.com/edit/stackblitz-starters-autnnk?file=app%2Fpage.tsx

eschiebel commented 4 months ago

I'm not sure what I did wrong last week, but I have it working now. Sorry for wasting your time.

prevwong / craft.js

Drag and drop does not work in the tutorial #633

Your environment