🐝

【Memo #0.0.4】npm run dev & prod でのエラー M1 pro

2022/02/14に公開

Laravel

はじめに

Laravel 初学者の私が学習した内容をアウトプットしていく記事になります。
冗長している点や軽い書き方などあれば御指南をお願いいたします。。。📝

npm run dev 時のエラーを解消

現在、M1 pro を使っており npm run dev をした際に下記のエラーが発生
*エラーは一部になります。

terminal

npm ERR! 1 warning and 1 error generated.
npm ERR! make: *** [Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/xxxxxxx/dev/i-reporter-wordpress-en/wp-content/themes/astra-child/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 21.1.0
npm ERR! gyp ERR! command “/Users/xxxxxxxx/.nodebrew/node/v16.13.2/bin/node” “/Users/xxxxxxxx/dev/i-reporter-wordpress-en/wp-content/themes/astra-child/node_modules/node-gyp/bin/node-gyp.js” “rebuild” “--verbose” “--libsass_ext=” “--libsass_cflags=” “--libsass_ldflags=” “--libsass_library=”
npm ERR! gyp ERR! cwd /Users/xxxxxxxx/dev/i-reporter-wordpress-en/wp-content/themes/astra-child/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.13.2
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!     /Users/xxxxxxx/.npm/_logs/2022-02-10T12_01_34_967Z-debug.log

こんなエラーがターミナルを埋めて、何から処理していいのかまずなんのエラーなのか検討もつかないほどのエラー文でした。。。

確認しておくこと

npm・Node・nodebrewの確認とインストールされているか。
インストールされていたら、下記のコマンドで確認

terminal

npm -v

terminal

node -v

それぞれバージョンが出ていれば大丈夫。今回私の場合、インストールも確認できていました。

node_module ファイル・package-lock.json ファイルの確認
npm installされていると、二つのファイルが生成されます。
そして、それぞれのプロジェクトにはpackage.jsonにRun する際のコマンドや挙動が書かれています。

package.json(例)

"scripts": {
    "dev": "npm-run-all dev:*",
    "dev:js": "webpack --mode development",
    "dev:css": "node-sass src/sass/ -o public/css --recursive",
    "watch": "npm-run-all --parallel watch:*",
    "watch:js": "webpack --mode development --watch",
    "watch:css": "node-sass src/sass/ -o public/css --recursive --watch",
    "build": "npm-run-all build:*",
    "build:js": "NODE_ENV=production webpack --mode production",
    "build:css": "node-sass src/sass/ -o public/css --recursive --output-style 'compressed'",
    "prod": "npm run build"
  },

上記のように、npm run XXXの指示が書いてあります。

解決策

npm install から再度実行

node_module・package-lock.jsonを手動で削除
nodebrew を　コンパイルして install

下記で nodebrew のバージョンのリストで 15系の最終版を確認

terminal

nodebrew ls-remote

コンパイルして install
2022/2 時点でv15.14.0が最終でした。

terminal

nodebrew install-binary v15.14.0

インストールできたら、バージョンを変更する。

terminal

nodebrew use v15.14.0

-　適用されているか確認

terminal

nodebrew ls

currentにインストールしたバージョンが確認できていればOK

terminal

current: v15.14.0

ここまでくればnode_module・package-lock.jsonが生成されているので、npm run XXXで動きました！

終わりに

Sassの編集をしていてnpm run devができない時は、上記のことを疑ってみるといいかもしれません。M1 proを使われている方(少数派だと思うが。)は、環境が少し特殊なので、思わずのところでのエラーにはまると思いますが、M1 proの記事も増えてくるといいと思いました。

今回は、上司の方のご意見を頂けたので解決できましたが他にも原因やこんなやり方もあるなど知見がございましたら、ご指南いただきたいと思います。
最後まで、ご拝読いただきありがとうございました。

はじめに

npm run dev 時のエラーを解消

確認しておくこと

解決策

npm install から再度実行

終わりに

Discussion