npm install時にnode-sassでcommand failed (nodejs 14から18に上げたメモ)

参考

• 【簡単】Node.jsにsassをインストールする手順 - Qiita

エラー node-sass

npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js

package.json を見ると

"node-sass": "^4.14.1",

とあった。これはnodejs 14 で動作する。動作バージョン一覧
インストールしたのがnodejs 18だったためエラーになった

nodejs 18対応は以下

package.json

- "node-sass": "^4.14.1",
+ "node-sass": "^8.0.0",

あわせてsass-loaderも更新する。
webpack 4系は sass-loader 10までのため10を指定。
参考: Nuxt.jsでSassを使用した際に「TypeError: this.getOptions is not a function」とエラーが出る | cly7796.net

package.json

- "sass-loader": "^8.0.2",
+ "sass-loader": "^10.0.0",

cache-loaderが含まれていなかったので含めた

npm run serveするとcache-loaderが見当たらないエラー。

• package-lock.json には 記載されていたが、 package.jsonにはなかったので追加

dependencies欄

package.json

+ "cache-loader": "^4.1.0",

openssl_fips未定義エラー対応

npm ERR! gyp: name 'openssl_fips' is not defined while evaluating condition 'openssl_fips != ""' in binding.gyp while trying to load binding.gyp

• Unable to target older node versions with node.js 17 · Issue #2534 · nodejs/node-gyp

• node_modules/node-gyp/gyp/pylib/gyp/input.py

node_modules/node-gyp/gyp/pylib/gyp/input.py

- env = {"__builtins__": {}, "v": StrictVersion}
+ env = {"__builtins__": {"openssl_fips": ""}, "v": StrictVersion}

デバッグ起動させる方法

この方法で、ビルドはうまくいきます。しかし、デバッグ用の起動のほうができませんでした。
electron: --openssl-legacy-provider is not allowed in NODE_OPTIONSというエラーが出て動きません。

• vue-cli-plugin-electron-builder でセットアップしたElectronプロジェクトがビルドできない - Qiita

上記と同じ現象になった。

vue.config.js の先頭に以下記述

vue.config.js

const crypto = require('crypto');
/**
 * md4 algorithm is not available anymore in NodeJS 17+ (because of + lib SSL 3).
 * In that case, silently replace md4 by md5 algorithm.
 */
try {
  crypto.createHash('md4');
} catch (e) {
  console.warn('Crypto "md4" is not supported anymore by this Node + + version');
  const origCreateHash = crypto.createHash;
  crypto.createHash = (alg, opts) => {
    return origCreateHash(alg === 'md4' ? 'md5' : alg, opts);
  };
}

キャッシュのクリア方法

npm cache clean --force
してから
npm install

ハット記号について

Major.Minor.Patch

• キャレット^をつけると、Major は一致し Minor と Patch は指定されたもの以上
• チルダ~をつけると、Major と Minor は一致し Patch は指定されたもの以上

Vue.js devtools

• Vue.js devtools - Chrome ウェブストア