npm installをしたら発生するエラー

Question

前提・実現したいこと

package.jsonのあるカレントディレクトリでnpm installをしたところエラーが出てしまい、ログを見ると
このようなエラーが出ていました。npm　もしくは　webpack　などに詳しい方がいたら原因を教えてほしいです。

発生している問題・エラーメッセージ

[root@localhost www]# tail -f /root/.npm/_logs/2021-05-20T01_53_41_481Z-debug.log
3696 error gyp ERR! stack     at maybeClose (internal/child_process.js:1048:16)
3696 error gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
3696 error gyp ERR! System Linux 4.18.0-240.22.1.el8_3.x86_64
3696 error gyp ERR! command "/usr/bin/node" "/root/.npm/_cacache/tmp/git-clone-516b1755/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
3696 error gyp ERR! cwd /root/.npm/_cacache/tmp/git-clone-516b1755/node_modules/node-sass
3696 error gyp ERR! node -v v14.16.0
3696 error gyp ERR! node-gyp -v v3.8.0
3696 error gyp ERR! not ok
3696 error Build failed with error code: 1
3697 verbose exit 1

該当のソースコード

試したこと

gitからアプリをクローンしてnpm run build を行うとpackage.jsonにある依存パッケージをインストールしろ
と言われたのでnpm installを行いました。

補足情報（FW/ツールのバージョンなど）

CentOS8
Node.js v14.16.0.
webpack
npm7.6.0

Answer 1

まず、node-gypの実行環境を綺麗に整えるのが解決方法一つ目です。
そのためにnode-gypとはなんぞや？について解説します。

世の中にはCやC++で書かれたソフトウェアが沢山存在します。
それをNode.jsからシームレスに扱えると素敵ですよね。
そこでnode-gypというライブラリが存在します。

これの助けを得る事で、
CやC++で書かれたライブラリをnpmのパッケージで管理することが出来ます。
しかしCやC++はコンパイル言語なので、コンパイルして実行形式にしなければ何の役にも立ちません。

なのでnpm installのタイミングでCやC++のソースコードをコンパイルして実行形式にする作業が挟まります。
この橋渡しをしてくれるのがnode-gypです。

さて、エラー文を見る限りnode-sassというパッケージが邪魔しているようです。

要件はInstallationの項目に記載されています

• Python v3.6, v3.7, v3.8, or v3.9
• make
• A proper C/C++ compiler toolchain, like GCC

確かにnode-sassはnode-gypに依存しています。
上記のこれらの環境は全て揃っていますか？

エラー文の簡素さを見る限り環境が不足しているんじゃないかと思うので、
まずその環境構築が整っているかを確認してみてください。

---

ここからは回避策

Node.js使いにとってインストール時のトラブルが死ぬほど出まくるnode-gypは相当嫌われています。
それはnode-sassも同様で、出来ればNode.jsだけで完結するシンプルなsassのコンパイラ欲しいですよね。
ちょっとの速度の為にそんなエラーと格闘したくねーよ。

そのまんまなライブラリが存在します。
sass - npm

A pure JavaScript implementation of Sass. Sass makes CSS fun again.
意訳: Sassの純粋なJavaScript実装。 SassはCSSを再び楽しくします。

どんだけnode-sassは嫌われているんだ……！

node-sassがDeprecatedになるとのことでNuxt.jsのsassをアップデートした - Qiita

node-sass(LibSass)って長らく使ってたイメージありますね。

LibSass is Deprecated

こちらに記事にあるようにLibSassっていうC++で書かれたライブラリを使った非推奨になるとのことで、これを使ってるnode-sassも非推奨になり、Dart製のSassを使ってねという感じになる模様です。

そしてこのnode-sassは排除される流れになっているようです。
だったらこちらのsassライブラリに乗り換えたら良いんじゃね？
そしてこのsassライブラリはdart-sassと呼ばれているようですね。

sass-loader で dart-sass を使う - Qiita

質問文の要件満たすだけなら、
この参考記事に従ってconfigファイルやpackage.jsonを編集すると解決するんじゃないかと思います。

Comments

[mach-sim]

ありがとうございます。確かにモジュール関連のエラーだと思いますが既製品のアプリケーションをいじっているためpackage.jsonをあまりいじらないほうがいいかな、と思いふとnode.jsをインストールしなおしてリブートをかけたら何故かビルドができるようになりました、、、
と思いきや、ビルドの最後に下記のエラーがでてこの始末です。。原因はwebpack？なのかわかりませんが先ほどの意味不明なエラーは抜け出せたと思います。お教えいただき助かりました。

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! アプリ名 build: `NODE_ENV=production webpack --progress --config webpack.prod.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the アプリ名 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-05-20T06_29_47_041Z-debug.log

以下エラーログ

[root@localhost www]# tail -f /root/.npm/_logs/2021-05-20T06_29_47_041Z-debug.log
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
18 verbose node v14.16.0
19 verbose npm v6.14.11
20 error code ELIFECYCLE
21 error errno 1
22 error アプリ名 build: `NODE_ENV=production webpack --progress --config webpack.prod.js`
22 error Exit status 1
23 error Failed at the アプリ名 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]