node-sass won't work with node v15.11 and npm v7.6.0

renich commented 3 years ago

Description

When using the aforementioned versions, when trying to use amber watch, npm fails to build node-sass.

[renich@introdesk someproj]$ amber w
10:47:06 watch.run (Info) Building...
2021-04-20T15:47:06.097552Z   INFO - watch.run: Building...
2021-04-20T15:47:15.786157Z   INFO - watch.run: Compiled in 00:00:09.688560458
10:47:15 watch.run (Info) Compiled in 00:00:09.688560458
2021-04-20T15:47:15.787181Z   INFO - watch.spec: Starting...
10:47:15 watch.spec (Info) Starting...
2021-04-20T15:47:15.788236Z   INFO - watch.npm: Building...
10:47:15 watch.npm (Info) Building...
10:47:15 amber.server | (Info) Amber 0.36.0 serving application "Someproj" at http://0.0.0.0:3000
10:47:15 amber.server | (Info) Server started in development.
10:47:15 amber.server | (Info) Startup Time 00:00:00.000120991
10:47:15 amber.support.client_reload | (Info) Watching 6 files (browser reload)...
npm ERR! code 1
npm ERR! path /home/renich/someproj/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/bin/node /home/renich/someproj/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/renich/someproj/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@15.11.0 | 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 "/usr/bin/python3" in the PATH
npm ERR! gyp verb `which` succeeded /usr/bin/python3 /usr/bin/python3
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: Command failed: /usr/bin/python3 -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:326:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:378:20)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1067:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Linux 5.11.13-300.fc34.x86_64
npm ERR! gyp ERR! command "/usr/bin/node" "/home/renich/someproj/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /home/renich/someproj/node_modules/node-sass
npm ERR! gyp ERR! node -v v15.11.0
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/renich/.npm/_logs/2021-04-20T15_47_39_280Z-debug.log
2021-04-20T15:47:39.317682Z   INFO - watch.npm: Build step failed.
2021-04-20T15:47:39.318739Z   INFO - watch.spec: Exited
10:47:39 watch.npm (Info) Build step failed.
10:47:39 watch.spec (Info) Exited
10:47:50 amber.server | (Info) Shutting down Amber

Steps to Reproduce

Create a project: amber new -d sqlite someproj
Force shard installation (in the 1.0 branch): cd $_; shards install --ignore-crystal-version
Start a watcher: crystal w
Watch it fail to build the node requirements.

Expected behavior: [What you expect to happen] It should just build successfully.

Actual behavior: [What actually happens] It fails to build node-sass.

Reproduces how often: [What percentage of the time does it reproduce?] This happens every time.

Versions

Amber: Amber CLI (amberframework.org) - v0.36.0 OS: Fedora 34 beta node: v15.11.0 npm: v7.6.0

Additional Information

The fix is simple enough. Just update the node-sass requirement in package.json to ^5.0.0. Here're the notes upstream: https://openbase.com/js/node-sass/versions

renich commented 3 years ago

OK, the fix is a bit more complicated.

First, had to update every dependency. Current versions are:

  "devDependencies": {
    "@babel/core": "^7.13.16",
    "@babel/preset-env": "^7.13.15",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.2.4",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.5.0",
    "node-sass": "^5.0.0",
    "sass-loader": "^11.0.1",
    "webpack": "^5.34.0",
    "webpack-cli": "^4.6.0",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "bootstrap": "^4.6.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.14.6"
  }

Also, had to modify: config/webpack/development.js and replace the webpack-merge line with:

const { merge } = require('webpack-merge');

Then, a subsequent npm update to update the dependencies. After that, just run amber w and it should work.

That did it. It works fine now.

eliasjpr commented 3 years ago

Fixed with #1258

amberframework / amber