Unable to install and run basic example

[Traveller23]

Describe the bug I followed the commands as stated in the readme (https://github.com/prevwong/craft.js/blob/develop/examples/basic/README.md), and when I run npm install, I get the following prompt:

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"8.34.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^5.0.0 || ^6.0.0" from @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   dev @typescript-eslint/parser@"2.14.0" from the root project
npm ERR!   peer @typescript-eslint/parser@"^2.0.0" from @typescript-eslint/[email protected]
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"2.14.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\pello\AppData\Local\npm-cache\_logs\2023-09-06T05_41_34_051Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\pello\AppData\Local\npm-cache\_logs\2023-09-06T05_41_34_051Z-debug-0.log

To Reproduce

git clone https://github.com/prevwong/craft.js/
cd craft.js/examples/basic
npm install

Your environment

Software	Version(s)
craft.js	commit 6106115329d88bfa592012e810356c32f7de5b6d
React	N/A
TypeScript	N/A
Browser	N/A
npm/Yarn	node v20.6.0, npm 9.8.1
Operating System	Windows 10

[sailei1]

yarn install @Traveller23

[Traveller23]

yarn install @Traveller23

Thanks, so all commands that use npm have to be changed to yarn, right?

[Traveller23]

This is the output on my machine:

$ yarn install
➤ YN0000: ┌ Resolution step
➤ YN0002: │ @craftjs/layers@workspace:packages/layers doesn't provide react-dom (pa69fb), requested by styled-components
➤ YN0002: │ @docsearch/react@npm:3.3.3 [37fb6] doesn't provide @algolia/client-search (p9ccf4), requested by @algolia/autocomplete-preset-algolia
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [dc3fc] doesn't provide @babel/plugin-syntax-flow (p0f861), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [dc3fc] doesn't provide @babel/plugin-transform-react-jsx (p82e8a), requested by eslint-plugin-flowtype
➤ YN0060: │ example-basic@workspace:examples/basic provides @material-ui/core (p0cded) with version 4.5.2, which doesn't satisfy what material-ui-color-picker requests
➤ YN0060: │ example-basic@workspace:examples/basic provides react (pd5f06) with version 18.2.0, which doesn't satisfy what @material-ui/core and some of its descendants request
➤ YN0060: │ example-basic@workspace:examples/basic provides react (p7d811) with version 18.2.0, which doesn't satisfy what material-ui-color-picker and some of its descendants request
➤ YN0060: │ example-basic@workspace:examples/basic provides react-dom (pd8819) with version 18.2.0, which doesn't satisfy what @material-ui/core and some of its descendants request
➤ YN0060: │ example-landing@workspace:examples/landing provides next (p78de7) with version 13.1.6, which doesn't satisfy what next-seo requests
➤ YN0002: │ example-landing@workspace:examples/landing doesn't provide prop-types (p50548), requested by react-loading
➤ YN0060: │ example-landing@workspace:examples/landing provides react (pace4d) with version 18.2.0, which doesn't satisfy what @material-ui/core and some of its descendants request
➤ YN0060: │ example-landing@workspace:examples/landing provides react (pd654d) with version 18.2.0, which doesn't satisfy what @material-ui/icons requests
➤ YN0060: │ example-landing@workspace:examples/landing provides react (pfcdbe) with version 18.2.0, which doesn't satisfy what next-seo requests
➤ YN0060: │ example-landing@workspace:examples/landing provides react-dom (p4f9ed) with version 18.2.0, which doesn't satisfy what @material-ui/core and some of its descendants request
➤ YN0060: │ example-landing@workspace:examples/landing provides react-dom (pd502a) with version 18.2.0, which doesn't satisfy what @material-ui/icons requests
➤ YN0060: │ example-landing@workspace:examples/landing provides react-dom (p52a6d) with version 18.2.0, which doesn't satisfy what next-seo requests
➤ YN0002: │ react-dev-utils@npm:12.0.1 doesn't provide typescript (p59348), requested by fork-ts-checker-webpack-plugin
➤ YN0002: │ react-dev-utils@npm:12.0.1 doesn't provide webpack (p1012e), requested by fork-ts-checker-webpack-plugin
➤ YN0002: │ react-rnd@npm:10.1.1 doesn't provide react (pbe555), requested by react-draggable
➤ YN0002: │ react-rnd@npm:10.1.1 doesn't provide react-dom (p29141), requested by react-draggable
➤ YN0060: │ root-workspace-0b6124@workspace:. provides eslint (p32017) with version 8.34.0, which doesn't satisfy what @typescript-eslint/eslint-plugin and some of its descendants request
➤ YN0060: │ root-workspace-0b6124@workspace:. provides eslint (pce91b) with version 8.34.0, which doesn't satisfy what @typescript-eslint/parser requests
➤ YN0002: │ root-workspace-0b6124@workspace:. doesn't provide react (p68c5a), requested by @testing-library/react
➤ YN0002: │ root-workspace-0b6124@workspace:. doesn't provide react-dom (p63e45), requested by @testing-library/react
➤ YN0060: │ site@workspace:site provides react (p56a12) with version 18.2.0, which doesn't satisfy what @docusaurus/core and some of its descendants request
➤ YN0060: │ site@workspace:site provides react (p275c8) with version 18.2.0, which doesn't satisfy what @docusaurus/plugin-client-redirects requests
➤ YN0060: │ site@workspace:site provides react (p95a7d) with version 18.2.0, which doesn't satisfy what @docusaurus/preset-classic and some of its descendants request
➤ YN0060: │ site@workspace:site provides react-dom (pdec50) with version 18.2.0, which doesn't satisfy what @docusaurus/core and some of its descendants request
➤ YN0060: │ site@workspace:site provides react-dom (p82bcc) with version 18.2.0, which doesn't satisfy what @docusaurus/plugin-client-redirects requests
➤ YN0060: │ site@workspace:site provides react-dom (p16009) with version 18.2.0, which doesn't satisfy what @docusaurus/preset-classic and some of its descendants request
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yargs@npm:17.6.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yauzl@npm:2.10.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ youtube-player@npm:5.5.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ zwitch@npm:1.0.4 can't be found in the cache and will be fetched from the remote registry
➤ YN0066: │ typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=bda367: Cannot apply hunk #3
➤ YN0000: └ Completed in 9s 255ms
➤ YN0000: ┌ Link step
➤ YN0007: │ cypress@npm:6.5.0 must be built because it never has been before or the last one failed
➤ YN0007: │ husky@npm:3.1.0 must be built because it never has been before or the last one failed
➤ YN0007: │ styled-components@npm:4.2.1 [30132] must be built because it never has been before or the last one failed
➤ YN0007: │ styled-components@npm:4.4.1 [9cec3] must be built because it never has been before or the last one failed
➤ YN0007: │ core-js@npm:3.27.2 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js-pure@npm:3.27.2 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1m 32s
➤ YN0000: Done with warnings in 1m 41s

The installation seems to be successful, but when I run the yarn start command and open the browser, I get the following error:

$ yarn start
ready - started server on 0.0.0.0:3002, url: http://localhost:3002
warn  - Invalid next.config.js options detected:
  - The value at .assetPrefix must be 1 character or more but it was 0 characters.

See more info here: https://nextjs.org/docs/messages/invalid-next-config
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
event - compiled client and server successfully in 841 ms (302 modules)
wait  - compiling / (client and server)...
error - ./components/SettingsPanel.js:1:0
Module not found: Can't resolve '@craftjs/core'
> 1 | import { useEditor } from '@craftjs/core';
  2 | import {
  3 |   Box,
  4 |   Chip,

Import trace for requested module:
./pages/index.js

I think the direct problem with the error is that the '@craftjs/core' package is not installed, but why is this package not installed? It's clearly mentioned in package.json.

[sailei1]

I use node 18.3.0 yarn 3.2.0

[Traveller23]

I found the solution: before running the example, you have to compile craft.js itself:

cd ../..
yarn install
yarn build
cd examples/basic
yarn install
yarn start

There are too few instructions for a newbie like me, and I hope there will be more description text in the future. @prevwong

[Jantje2000]

I am having the same problem. Trying the solution above I got:

 yarn build
lerna notice cli v4.0.0
lerna notice filter excluding ["site","example-*"]
lerna info filter [ '!site', '!example-*' ]
lerna info Executing command in 3 packages: "yarn run build"
@craftjs/utils: /bin/bash: C:\*******\craft.js\scripts\build.sh: No such file or directory
lerna ERR! yarn run build exited 127 in '@craftjs/utils'

[bigexpert]

Paths with \ (backslash) separator are not handled properly, which makes build on native Windows not working.