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

Getting started guide raises an error: npm install, node-gyp python2 couldn't be found #4359

Closed
czardien opened this issue Jul 2, 2021 · 7 comments

Comments

@czardien
Copy link

czardien commented Jul 2, 2021

Environment

  • Elixir version (elixir -v):
Erlang/OTP 24 [erts-12.0] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit]

Elixir 1.12.1 (compiled with Erlang/OTP 24)
  • Phoenix version (mix deps):
* phoenix 1.5.9 (Hex package) (mix)
  locked at 1.5.9 (phoenix) 7e4bce20
* phoenix_ecto 4.3.0 (Hex package) (mix)
  locked at 4.3.0 (phoenix_ecto) 0ac49192
* phoenix_html 2.14.3 (Hex package) (mix)
  locked at 2.14.3 (phoenix_html) efd697a7
* phoenix_live_dashboard 0.4.0 (Hex package) (mix)
  locked at 0.4.0 (phoenix_live_dashboard) 8d52149e
* phoenix_live_reload 1.3.2 (Hex package) (mix)
  locked at 1.3.2 (phoenix_live_reload) 6d6f1d35
* phoenix_live_view 0.15.7 (Hex package) (mix)
  locked at 0.15.7 (phoenix_live_view) 3a756cf6
* phoenix_pubsub 2.0.0 (Hex package) (mix)
  locked at 2.0.0 (phoenix_pubsub) c52d948c
  • Node.js version (node -v):
v16.4.1
  • NPM version (npm -v):
7.17.0
  • Operating system:

Arch Linux, uname -a:

Linux shash-mind 5.12.14-arch1-1 #1 SMP PREEMPT Thu, 01 Jul 2021 07:26:06 +0000 x86_64 GNU/Linux

Expected behavior

The getting started guide doesn't fail in early steps.

Actual behavior

Just started following the up and running guide on the phoenix documentation for version 1.5.9 at: https://hexdocs.pm/phoenix/up_and_running.html#content.

Running the first step is fine:

mix phx.new antenna

... which logs, including instructions:

* creating antenna/config/config.exs
* creating antenna/config/dev.exs
* creating antenna/config/prod.exs
* creating antenna/config/prod.secret.exs
* creating antenna/config/test.exs
* creating antenna/lib/antenna/application.ex
* creating antenna/lib/antenna.ex
* creating antenna/lib/antenna_web/channels/user_socket.ex
* creating antenna/lib/antenna_web/views/error_helpers.ex
* creating antenna/lib/antenna_web/views/error_view.ex
* creating antenna/lib/antenna_web/endpoint.ex
* creating antenna/lib/antenna_web/router.ex
* creating antenna/lib/antenna_web/telemetry.ex
* creating antenna/lib/antenna_web.ex
* creating antenna/mix.exs
* creating antenna/README.md
* creating antenna/.formatter.exs
* creating antenna/.gitignore
* creating antenna/test/support/channel_case.ex
* creating antenna/test/support/conn_case.ex
* creating antenna/test/test_helper.exs
* creating antenna/test/antenna_web/views/error_view_test.exs
* creating antenna/lib/antenna/repo.ex
* creating antenna/priv/repo/migrations/.formatter.exs
* creating antenna/priv/repo/seeds.exs
* creating antenna/test/support/data_case.ex
* creating antenna/lib/antenna_web/controllers/page_controller.ex
* creating antenna/lib/antenna_web/templates/layout/app.html.eex
* creating antenna/lib/antenna_web/templates/page/index.html.eex
* creating antenna/lib/antenna_web/views/layout_view.ex
* creating antenna/lib/antenna_web/views/page_view.ex
* creating antenna/test/antenna_web/controllers/page_controller_test.exs
* creating antenna/test/antenna_web/views/layout_view_test.exs
* creating antenna/test/antenna_web/views/page_view_test.exs
* creating antenna/lib/antenna_web/gettext.ex
* creating antenna/priv/gettext/en/LC_MESSAGES/errors.po
* creating antenna/priv/gettext/errors.pot
* creating antenna/assets/webpack.config.js
* creating antenna/assets/.babelrc
* creating antenna/assets/js/app.js
* creating antenna/assets/css/app.scss
* creating antenna/assets/js/socket.js
* creating antenna/assets/package.json
* creating antenna/assets/static/favicon.ico
* creating antenna/assets/css/phoenix.css
* creating antenna/assets/static/images/phoenix.png
* creating antenna/assets/static/robots.txt

Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development
* running mix deps.compile

We are almost there! The following steps are missing:

    $ cd antenna
    $ cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development

Then configure your database in config/dev.exs and run:

    $ mix ecto.create

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server

From there, I go into the next step:

$ cd antenna
$ cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development

... which raises:

npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated querystring@0.2.0: The
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! code 1
npm ERR! path /home/adrien/code/czard/antenna/assets/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/bin/node /home/adrien/code/czard/antenna/assets/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/usr/bin/node',
npm ERR! gyp verb cli   '/home/adrien/code/czard/antenna/assets/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.4.1 | linux | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/home/adrien/code/czard/antenna/assets/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/home/adrien/code/czard/antenna/assets/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/home/adrien/code/czard/antenna/assets/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /home/adrien/code/czard/antenna/assets/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /home/adrien/code/czard/antenna/assets/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /home/adrien/code/czard/antenna/assets/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:195:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/home/adrien/code/czard/antenna/assets/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/home/adrien/code/czard/antenna/assets/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/home/adrien/code/czard/antenna/assets/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /home/adrien/code/czard/antenna/assets/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /home/adrien/code/czard/antenna/assets/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /home/adrien/code/czard/antenna/assets/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:195:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python /usr/bin/python
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: /usr/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1067:16)
npm ERR! gyp ERR! stack     at Socket.<anonymous> (node:internal/child_process:453:11)
npm ERR! gyp ERR! stack     at Socket.emit (node:events:394:28)
npm ERR! gyp ERR! stack     at Pipe.<anonymous> (node:net:662:12)
npm ERR! gyp ERR! System Linux 5.12.14-arch1-1
npm ERR! gyp ERR! command "/usr/bin/node" "/home/adrien/code/czard/antenna/assets/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /home/adrien/code/czard/antenna/assets/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.4.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/adrien/.npm/_logs/2021-07-02T16_11_00_305Z-debug.log

I am not familiar with npm but I thought this part would be straightforward, any idea what is going here?

@czardien
Copy link
Author

czardien commented Jul 2, 2021

Doing some research I understand npm install is trying to build node-gyp version 3.8.0 (current release is 8.1.0) instead of pulling a binary, I'm not sure why. To do so, it requires python2, which I don't have installed on my system, and I'd be reluctant to install it before trying to understand if I can fix it another way as it's reached its end of life a while ago.

I also understand node-gyp is a dependency of node-saas version 4.13.1 (current release is 6.0.1), but I'm not too sure.

My package.json:

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "sass-loader": "^8.0.2",
    "node-sass": "^4.13.1",
    "hard-source-webpack-plugin": "^0.13.1",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.2"
  }
}

Any idea what I could be doing now?

@czardien
Copy link
Author

czardien commented Jul 2, 2021

From a fresh phx.new app, I tried updating my package.json file with the latest version for: node-sass, setting it at: 6.0.1.

From there, I get the error:

[hardsource:ed51ac00] Writing new cache ed51ac00...
[hardsource:ed51ac00] Tracking node dependencies with: package-lock.json.
Hash: 16129e8b0838a941387b
Version: webpack 4.46.0
Time: 458ms
Built at: 02/07/2021 17:25:21
                Asset       Size  Chunks             Chunk Names
       ../favicon.ico   1.23 KiB          [emitted]
../images/phoenix.png   13.6 KiB          [emitted]
        ../robots.txt  202 bytes          [emitted]
               app.js   14.9 KiB     app  [emitted]  app
Entrypoint app = app.js
[0] multi ./js/app.js 28 bytes {app} [built]
[../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {app} [built]
[./css/app.scss] 1.54 KiB {app} [built] [failed] [1 error]
[./js/app.js] 490 bytes {app} [built]

ERROR in ./css/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
    at getSassImplementation (/home/adrien/code/czard/antenna/assets/node_modules/sass-loader/dist/getSassImplementation.js:46:13)
    at Object.loader (/home/adrien/code/czard/antenna/assets/node_modules/sass-loader/dist/index.js:40:61)
    at /home/adrien/code/czard/antenna/assets/node_modules/webpack/lib/NormalModule.js:316:20
    at /home/adrien/code/czard/antenna/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/adrien/code/czard/antenna/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/home/adrien/code/czard/antenna/assets/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/home/adrien/code/czard/antenna/assets/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/adrien/code/czard/antenna/assets/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/adrien/code/czard/antenna/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/adrien/code/czard/antenna/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/adrien/code/czard/antenna/assets/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
 @ ./js/app.js 4:0-25
 @ multi ./js/app.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!css/app.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss] 387 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

    ERROR in ./css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
        at getSassImplementation (/home/adrien/code/czard/antenna/assets/node_modules/sass-loader/dist/getSassImplementation.js:46:13)
        at Object.loader (/home/adrien/code/czard/antenna/assets/node_modules/sass-loader/dist/index.js:40:61)

@czardien
Copy link
Author

czardien commented Jul 2, 2021

I also tried update package.json with an updated version of sass-loader to: 12.1.0.

No luck again, this raises a conflict when trying to 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: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.41.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0.0" from sass-loader@12.1.0
npm ERR! node_modules/sass-loader
npm ERR!   dev sass-loader@"^12.1.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! See /home/adrien/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/adrien/.npm/_logs/2021-07-02T16_29_18_267Z-debug.log

So that's not helpful either.

I'm a bit sad I'm getting stuck so early in the up and running guide, any idea what I might do now?

@czardien
Copy link
Author

czardien commented Jul 2, 2021

Found a very helpful Nicd on libera.chat #elixir and got me unstuck 🙏

I updated my package.json file by changing the dependency on node-sass to sass, with version: 1.35.1, which let me run:

 npm install && node node_modules/webpack/bin/webpack.js --mode development

... fine and let me run:

mix phx.server

... without warning or error, so that sounds like a good workaround to me. This is the package.json file that works for me:

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "sass-loader": "^8.0.2",
    "sass": "^1.35.1",
    "hard-source-webpack-plugin": "^0.13.1",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.2"
  }
}

Also highlighting that this is a duplicate of: #4308, although I'm not too sure why it's close, so I'll leave this open for a bit.

Also highlighting this merged PR that might be relevant: #4337.

@chrismccord
Copy link
Member

Sass has been removed from master in part to help avoid these kinds of problems. We have not yet backported the removal of sass for the v1.5 brach, but you can remove the sass npm deps, and the sass-loader from webpack config, then rename your app.scss to app.css, and changed the import in app/assets/js to reference the app.css instead of app.scss. You can also install the necessary deps for node-sass to build, but closing as this is not an issue on our side exactly. Thanks!

@czardien
Copy link
Author

czardien commented Jul 2, 2021

Hi @chrismccord 👋 Thank you so much for getting back to me! I'm curious how this is not an issue on your side exactly?

I picked up the Up and Running guide and got straight into a whole bunch of errors. I had to go to a community chat and I was fortunate enough to get assistance to get through the very first steps.

At least it sounds like a documentation problem, would this fit in a troubleshooting section for instance? That would have been helpful.

@chrismccord
Copy link
Member

chrismccord commented Jul 2, 2021

This is very specific to node/npm which we include by default by shipping a webpack and package.json setup, but only affects some users on some systems as of recent. We have addressed this by removing sass from the phx.new generator in 1.6 which is due out very soon, but in the end the root problem is not in any of our sources. I understand that it's frustrating for users to hit this, and we especially don't want newcomers to hit any friction, but this is literally not something we can solve since the problem is on node/npm/node-sass/etc. We've taken necessary steps to mitigate problems for people and a release will be out soon :)

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