search

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.46k stars 1.16k forks source link

`yarn build` fails on fresh Debian 11 #910

Closed HatWeight closed 2 years ago

HatWeight commented 2 years ago

Hi! I wanted to try this library since judging by the demos it is exactly what I'm looking for in my project.

I'm trying to get react-diagrams up and running. I've never used fnm, yarn or node so I may have done something stupid.

I followed the instructions and failed with yarn build multiple times.

On a fresh Debian 11 machine I did:

sudo apt install curl
curl -fsSL https://fnm.vercel.app/install > fnm_install.sh
less fnm_install.sh 
bash fnm_install.sh 
. ~/.bashrc
fnm install v16.13.0
corepack enable
yarn add @projectstorm/react-diagrams
cd node_modules/@projectstorm/react-diagrams
yarn build

yarn run v1.22.15
warning ../../../package.json: No license field
$ ../../node_modules/.bin/webpack
/bin/sh: 1: ../../node_modules/.bin/webpack: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
cd
yarn add webpack --dev
cd node_modules/@projectstorm/react-diagrams
yarn build

yarn run v1.22.15
warning ../../../package.json: No license field
$ ../../node_modules/.bin/webpack
/bin/sh: 1: ../../node_modules/.bin/webpack: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
vi package.json

I added another ../ in the build command since the package.json was looking for ../../node_modules/.bin/webpack, not ../../../node_modules/.bin/webpack.

yarn build

yarn run v1.22.15
warning ../../../package.json: No license field
$ ../../../node_modules/.bin/webpack
CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...

added 213 packages, and audited 214 packages in 30s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice 
npm notice New patch version of npm available! 8.1.0 -> 8.1.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.4
npm notice Run npm install -g npm@8.1.4 to update!
npm notice 
Error: Cannot find module 'webpack-cli/package.json'
Require stack:
- /home/user/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at runCli (/home/user/node_modules/webpack/bin/webpack.js:65:26)
    at /home/user/node_modules/webpack/bin/webpack.js:154:5
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/user/node_modules/webpack/bin/webpack.js' ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What's the preferred method of getting react-diagrams running on a Debian or Fedora machine? What am I doing wrong?

HatWeight commented 2 years ago

On a fresh Fedora 34 machine, this time I used npm, following the docs. I'm not sure if I even have to yarn build if I use npm instead of yarn. I still get errors. I can't find the diagrams-demo-gallery - should I just copy it from the repo?

[@@@@@@@@@  node_modules]$ npm install @projectstorm/react-diagrams

[@@@@@@@@@  node_modules]$ cd \@projectstorm/react-diagrams/dist

[@@@@@@@@@  dist]$ ls
@types  index.js  index.js.map  index.umd.js  index.umd.js.map

[@@@@@@@@@  dist]$ cd

[@@@@@@@@@  ~]$ npm install closest lodash react dagre pathfinding paths-js @emotion/react @emotion/styled resize-observer-polyfill

[@@@@@@@@@  node_modules]$ ls
@babel                      find-up                        p-locate
@discoveryjs                function-bind                  p-try
@emotion                    gensync                        parent-module
@projectstorm               get-stream                     parse-json
@types                      glob-to-regexp                 path-exists
@webassemblyjs              globals                        path-key
@webpack-cli                graceful-fs                    path-parse
@xtuc                       graphlib                       path-type
acorn                       has                            pathfinding
acorn-import-assertions     has-flag                       paths-js
ajv                         heap                           picocolors
ajv-keywords                hoist-non-react-statics        pkg-dir
ansi-styles                 human-signals                  punycode
babel-plugin-macros         import-fresh                   randombytes
browserslist                import-local                   react
buffer-from                 interpret                      react-is
callsites                   is-arrayish                    rechoir
caniuse-lite                is-core-module                 regenerator-runtime
chalk                       is-plain-object                resize-observer-polyfill
chrome-trace-event          is-stream                      resolve
clone-deep                  isexe                          resolve-cwd
closest                     isobject                       resolve-from
color-convert               jest-worker                    safe-buffer
color-name                  js-tokens                      schema-utils
colorette                   jsesc                          semver
commander                   json-parse-better-errors       serialize-javascript
convert-source-map          json-parse-even-better-errors  shallow-clone
cosmiconfig                 json-schema-traverse           shebang-command
cross-spawn                 json5                          shebang-regex
csstype                     kind-of                        signal-exit
dagre                       lines-and-columns              source-map
debug                       loader-runner                  source-map-support
electron-to-chromium        locate-path                    strip-final-newline
enhanced-resolve            lodash                         stylis
envinfo                     loose-envify                   supports-color
error-ex                    matches-selector               tapable
es-module-lexer             merge-stream                   terser
escalade                    mime-db                        terser-webpack-plugin
escape-string-regexp        mime-types                     to-fast-properties
eslint-scope                mimic-fn                       uri-js
esrecurse                   minimist                       watchpack
estraverse                  ms                             webpack
events                      neo-async                      webpack-cli
execa                       node-releases                  webpack-merge
fast-deep-equal             npm-run-path                   webpack-sources
fast-json-stable-stringify  object-assign                  which
fastest-levenshtein         onetime                        wildcard
find-root                   p-limit                        yaml

[@@@@@@@@@  node_modules]$ ls \@projectstorm/
geometry           react-diagrams       react-diagrams-defaults
react-canvas-core  react-diagrams-core  react-diagrams-routing

[@@@@@@@@@  node_modules]$ find . -iname '*demo*'
./@projectstorm/react-diagrams-defaults/dist/node/DefaultNodeModel.js
./@projectstorm/react-diagrams-defaults/dist/node/DefaultNodeModel.js.map
./@projectstorm/react-diagrams-defaults/dist/@types/node/DefaultNodeModel.d.ts
./@projectstorm/react-diagrams-defaults/src/node/DefaultNodeModel.ts
./@projectstorm/react-diagrams-core/dist/entities/node/NodeModel.js
./@projectstorm/react-diagrams-core/dist/entities/node/NodeModel.js.map
./@projectstorm/react-diagrams-core/dist/@types/entities/node/NodeModel.d.ts
./@projectstorm/react-diagrams-core/src/entities/node/NodeModel.ts

[@@@@@@@@@  node_modules]$ cd \@projectstorm/react-diagrams

[@@@@@@@@@  react-diagrams]$ yarn build
yarn run v1.22.15
warning ../../../package.json: No license field
$ ../../node_modules/.bin/webpack
/bin/sh: line 1: ../../node_modules/.bin/webpack: No such file or directory
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[@@@@@@@@@  react-diagrams]$ vi package.json 

[@@@@@@@@@  react-diagrams]$ yarn build
yarn run v1.22.15
warning ../../../package.json: No license field
$ ../../../node_modules/.bin/webpack
/bin/sh: line 1: ../../../node_modules/.bin/webpack: Permission denied
error Command failed with exit code 126.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[@@@@@@@@@  react-diagrams]$ chmod 755 -R ~/node_modules

[@@@@@@@@@  react-diagrams]$ yarn build
yarn run v1.22.15
warning ../../../package.json: No license field
$ ../../../node_modules/.bin/webpack
assets by status 0 bytes [cached] 1 asset

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve './src' in '/home/user/node_modules/@projectstorm/react-diagrams'
resolve './src' in '/home/user/node_modules/@projectstorm/react-diagrams'
  using description file: /home/user/node_modules/@projectstorm/react-diagrams/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/user/node_modules/@projectstorm/react-diagrams/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/node_modules/@projectstorm/react-diagrams/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/node_modules/@projectstorm/react-diagrams/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/node_modules/@projectstorm/react-diagrams/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/node_modules/@projectstorm/react-diagrams/src.wasm doesn't exist
      as directory
        existing directory /home/user/node_modules/@projectstorm/react-diagrams/src
          using description file: /home/user/node_modules/@projectstorm/react-diagrams/package.json (relative path: ./src)
            using path: /home/user/node_modules/@projectstorm/react-diagrams/src/index
              using description file: /home/user/node_modules/@projectstorm/react-diagrams/package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/user/node_modules/@projectstorm/react-diagrams/src/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/user/node_modules/@projectstorm/react-diagrams/src/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/user/node_modules/@projectstorm/react-diagrams/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/user/node_modules/@projectstorm/react-diagrams/src/index.wasm doesn't exist

webpack 5.64.4 compiled with 1 error and 1 warning in 134 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
mecirmartin commented 2 years ago

Not sure what you are trying to do, from brief look at the commands, you are trying to build this library Most probably this is not the thing you want to do Here is working demo of this library (imports this library and constructs basic nodes) https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-project You should be able to clone this repo, then run yarn && yarn start and app will open on your localhost

HatWeight commented 2 years ago

Thanks, @mecirmartin! I was following the docs blindly and didn't really understand why I need the yarn build.

Following the advice you gave me, I cloned the repo and tried yarn && yarn start in diagrams-demo-project, but got an error (on both Debian and Fedora):

[user@f-diagrams diagrams-demo-project]$ yarn && yarn start
yarn install v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > jest-puppeteer@5.0.4" has incorrect peer dependency "puppeteer@>= 1.5.0 < 10".
warning "workspace-aggregator-7748f08e-916d-4f7e-8d3f-4538828582d0 > @projectstorm/react-diagrams-gallery > @storybook/addon-actions > @storybook/api > @reach/router@1.3.4" has incorrect peer dependency "react@15.x || 16.x || 16.4.0-alpha.0911da3".
warning "workspace-aggregator-7748f08e-916d-4f7e-8d3f-4538828582d0 > @projectstorm/react-diagrams-gallery > @storybook/addon-actions > @storybook/api > @reach/router@1.3.4" has incorrect peer dependency "react-dom@15.x || 16.x || 16.4.0-alpha.0911da3".
warning "workspace-aggregator-7748f08e-916d-4f7e-8d3f-4538828582d0 > @projectstorm/react-diagrams-gallery > @storybook/addon-options > @storybook/addons > @storybook/api@5.3.21" has unmet peer dependency "regenerator-runtime@*".
warning "workspace-aggregator-7748f08e-916d-4f7e-8d3f-4538828582d0 > @projectstorm/react-diagrams-gallery > @storybook/addon-actions > @storybook/api > @reach/router > create-react-context@0.3.0" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
[4/4] Building fresh packages...
Done in 24.88s.
yarn run v1.22.15
$ ./node_modules/.bin/webpack serve --open
ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/user/react-diagrams/diagrams-demo-project
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: asset bundle.js 3.38 MiB [emitted] (name: main)
runtime modules 1.25 KiB 6 modules
modules by path ../node_modules/ 1.29 MiB 42 modules
modules by path ./src/ 9.54 KiB
  modules by path ./src/custom-node-js/ 2.08 KiB 3 modules
  modules by path ./src/custom-node-ts/ 2.11 KiB 3 modules
  modules by path ./src/*.tsx 1.8 KiB
    ./src/main.tsx 1.53 KiB [built] [code generated]
    ./src/BodyWidget.tsx 282 bytes [built] [code generated]
  modules by path ./src/*.css 3.55 KiB
    ./src/main.css 1.13 KiB [built] [code generated]
    ../node_modules/css-loader/dist/cjs.js!./src/main.css 2.42 KiB [built] [code generated]

ERROR in ./src/custom-node-js/JSCustomNodeFactory.jsx 4:0-71
Module not found: Error: Can't resolve '@projectstorm/react-canvas-core' in '/home/user/react-diagrams/diagrams-demo-project/src/custom-node-js'
 @ ./src/main.tsx 5:0-75 13:46-65

ERROR in ./src/custom-node-js/JSCustomNodeModel.js 1:0-75
Module not found: Error: Can't resolve '@projectstorm/react-diagrams' in '/home/user/react-diagrams/diagrams-demo-project/src/custom-node-js'
 @ ./src/main.tsx 7:0-71 19:18-35

ERROR in ./src/custom-node-js/JSCustomNodeWidget.jsx 2:0-58
Module not found: Error: Can't resolve '@projectstorm/react-diagrams' in '/home/user/react-diagrams/diagrams-demo-project/src/custom-node-js'
 @ ./src/custom-node-js/JSCustomNodeFactory.jsx 3:0-58 15:44-62
 @ ./src/main.tsx 5:0-75 13:46-65

ERROR in ./src/BodyWidget.tsx 2:0-63
Module not found: Error: Can't resolve '@projectstorm/react-canvas-core' in '/home/user/react-diagrams/diagrams-demo-project/src'
 @ ./src/main.tsx 9:0-42 31:40-50

ERROR in ./src/custom-node-ts/TSCustomNodeFactory.tsx 4:0-71
Module not found: Error: Can't resolve '@projectstorm/react-canvas-core' in '/home/user/react-diagrams/diagrams-demo-project/src/custom-node-ts'
 @ ./src/main.tsx 6:0-75 14:46-65

ERROR in ./src/custom-node-ts/TSCustomNodeModel.ts 1:0-75
Module not found: Error: Can't resolve '@projectstorm/react-diagrams' in '/home/user/react-diagrams/diagrams-demo-project/src/custom-node-ts'
 @ ./src/main.tsx 8:0-71 21:18-35

ERROR in ./src/custom-node-ts/TSCustomNodeWidget.tsx 2:0-63
Module not found: Error: Can't resolve '@projectstorm/react-diagrams-core' in '/home/user/react-diagrams/diagrams-demo-project/src/custom-node-ts'
 @ ./src/custom-node-ts/TSCustomNodeFactory.tsx 3:0-58 13:35-53
 @ ./src/main.tsx 6:0-75 14:46-65

ERROR in ./src/main.tsx 4:0-92
Module not found: Error: Can't resolve '@projectstorm/react-diagrams' in '/home/user/react-diagrams/diagrams-demo-project/src'

8 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.46.0 compiled with 8 errors in 2604 ms
ℹ ｢wdm｣: Failed to compile.

Is there anything I'm missing? Thanks

HatWeight commented 2 years ago

I got it to run by running yarn build in the root directory (react-diagrams) and then rerunning yarn start in diagrams-demo-projects. I'm really happy I finally got it to run! Thanks!

mecirmartin commented 2 years ago

Just for the context, it was not able to find the dependencies the first time you tried (probably the yarn install did not run correctly). I'm glad you were able to fix this, feel free to close the issue