error /node_modules/node-sass: Command failed

Question

#はじめに
見てくださりありがとうございます！
お時間あればぜひご教授賜りたいです！

エラーに至った経緯を書かせていただきます。
ローカル環境では、問題なく起動しておりました。ですがherokuにアップすることができませんでした。
そこで下記URLの内容を参考にさせていただき（他にも参考にして打ってしまったコマンドがあるかもしれないです）
1記事目
2記事目
3記事目
色々といじくっていたら、ローカル環境でも起動できないようになりました。下記ターミナルでのエラー文となります
もう少し丁寧にコマンドを打つべきだと反省しております。

error /Users/yukinaga/projects/unkoapp-37164/node_modules/@rails/webpacker/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: /Users/yukinaga/projects/unkoapp-37164/node_modules/@rails/webpacker/node_modules/node-sass
Output:
Building: /Users/yukinaga/.nvm/versions/node/v16.13.1/bin/node /Users/yukinaga/projects/unkoapp-37164/node_modules/@rails/webpacker/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/Users/yukinaga/.nvm/versions/node/v16.13.1/bin/node',
gyp verb cli   '/Users/yukinaga/projects/unkoapp-37164/node_modules/@rails/webpacker/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@16.13.1 | darwin | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "/usr/local/opt/python@3.9/bin/python3" in the PATH
gyp verb `which` succeeded /usr/local/opt/python@3.9/bin/python3 /usr/local/opt/python@3.9/bin/python3
gyp ERR! configure error 
gyp ERR! stack Error: Command failed: /usr/local/opt/python@3.9/bin/python3 -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                       ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack 
gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
gyp ERR! System Darwin 21.1.0
gyp ERR! command "/Users/yukinaga/.nvm/versions/node/v16.13.1/bin/node" "/Users/yukinaga/projects/unkoapp-37164/node_modules/@rails/webpacker/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/yukinaga/projects/unkoapp-37164/node_modules/@rails/webpacker/node_modules/node-sass
gyp ERR! node -v v16.13.1
gyp ERR! node-gyp -v v3.8.0

{
  "name": "unkoapp",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.11.0",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "bootstrap": "^5.1.3",
    "node-sass": "^7.0.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^4.6.0"
  }
}

コメントをいただき、参考のURLと同じようにしようとしたらエラーが出ました。

yukinaga@yoshinaganoMacBook-Pro unkoapp-37164 % yarn remove nuxt node-sass sass-loader
yarn remove v1.22.17
[1/4] ????  Removing module nuxt...
error This module isn't specified in a package.json file.
info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command.

package.jsonにファイルがないとのエラーなので、記述してからコマンドを入力すれば良いのでしょうか？
もう１つ気になる点がございまして、yarn.lockにgitでのごちゃごちゃ具合がエラーを引き起こしているのかもしれないと思っていて、githubを使い一度変更を戻してみるほうがいいのか悩んでいます。
以下yarn.lockの一部

+"@types/minimist@^1.2.0":
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
  integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==

"@types/node@*":
  version "16.11.11"
  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.11.tgz#6ea7342dfb379ea1210835bada87b3c512120234"
  integrity sha512-KB0sixD67CeecHC33MYn+eYARkqTheIRNuu97y2XMjR7Wu3XibO1vaY6VBV6O/a89SPI81cEUIYT87UqUWlZNw==

"@types/normalize-package-data@^2.4.0":
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
  integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==

"@types/parse-json@^4.0.0":
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@ -1305,6 +1315,13 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
  dependencies:
    color-convert "^1.9.0"

ansi-styles@^4.1.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
  dependencies:
    color-convert "^2.0.1"

anymatch@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@ -1326,6 +1343,19 @@ aproba@^1.0.3, aproba@^1.1.1:
  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==

"aproba@^1.0.3 || ^2.0.0":
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
  integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==

are-we-there-yet@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz#372e0e7bd279d8e94c653aaa1f67200884bf3e1c"
  integrity sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==
  dependencies:
    delegates "^1.0.0"
    readable-stream "^3.6.0"

Answer 1

node-sassは非推奨になってるみたいですよ。

node-sassのnpm

記載されているエラーメッセージにpythonを実行しようとしてSyntaxErrorになってる部分がありますが、node-sassのビルド時の動きは、

1、node-sassのビルド済みバイナリがダウンロード出来たらそれを使う
2、無ければローカル環境でビルドしようとする

で、2の際にPythonやC++のビルド環境がローカルにないとダメ、という事のようです。

参考

ローカルがダメになったのは、コマンド叩いてる内に、今まで古い依存で動いていたものが更新された結果、node-sassのビルド済みバイナリのバージョンが無い環境になり、2の動きになったんじゃないでしょうか。

今後はDart Sassを使え、とのことなので、可能ならサクっと移行してしまったほうが早いかも。

参考

Comments

[iggy-]

解答本当にありがとうございます！
わかりやすくして説明もしていただき本当にありがとうございます！
移行させようとコマンドを打ったのですがエラーが出てしまいました。（上記に編集を加えました）
どのようにしたらよいかわからない状態で一度githubを使って戻してから教えていただいた
Dart Sassに移行しようと考えています。
本当に至らないところが多いと思いますが、またご教授いただける事がありましたらよろしくお願いします！

[umau]

参考記事のコマンドは、その人の環境に入ってるnuxtを入れなおすためだと思うので、こちらだと

yarn remove node-sass
yarn add sass

だけでいいんじゃないかと。