Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag and drop does not work in the tutorial #633

Closed
eschiebel opened this issue May 10, 2024 · 4 comments
Closed

Drag and drop does not work in the tutorial #633

eschiebel opened this issue May 10, 2024 · 4 comments

Comments

@eschiebel
Copy link

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

  1. create a craftjs-tutorial app using create-react-app
  2. follow the steps in https://craft.js.org/docs/guides/basic-tutorial
  3. 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
Copy link
Author

eschiebel commented May 10, 2024

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

  1. does not build with npm and requires yarn for the workspace features
  2. 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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants