[Laravel8]npm run devが失敗する場合の解決法

Laravel

Laravel8にJetstreamをインストールする際、npm run devコマンドで以下のエラーが発生

npm WARN notsup Unsupported engine for tailwindcss@3.0.23: wanted: {"node":">=12.13.0"} (current: {"node":"12.10.0","npm":"6.14.7"})
npm WARN notsup Not compatible with your version of node/npm: tailwindcss@3.0.23
npm WARN notsup Unsupported engine for laravel-mix@6.0.43: wanted: {"node":">=12.14.0"} (current: {"node":"12.10.0","npm":"6.14.7"})
npm WARN notsup Not compatible with your version of node/npm: laravel-mix@6.0.43
npm WARN notsup Unsupported engine for postcss-loader@6.2.1: wanted: {"node":">= 12.13.0"} (current: {"node":"12.10.0","npm":"6.14.7"})
npm WARN notsup Not compatible with your version of node/npm: postcss-loader@6.2.1
npm WARN notsup Unsupported engine for webpack-dev-server@4.7.4: wanted: {"node":">= 12.13.0"} (current: {"node":"12.10.0","npm":"6.14.7"})
npm WARN notsup Not compatible with your version of node/npm: webpack-dev-server@4.7.4
npm WARN notsup Unsupported engine for schema-utils@4.0.0: wanted: {"node":">= 12.13.0"} (current: {"node":"12.10.0","npm":"6.14.7"})
npm WARN notsup Not compatible with your version of node/npm: schema-utils@4.0.0
npm WARN notsup Unsupported engine for webpack-dev-middleware@5.3.1: wanted: {"node":">= 12.13.0"} (current: {"node":"12.10.0","npm":"6.14.7"})
npm WARN notsup Not compatible with your version of node/npm: webpack-dev-middleware@5.3.1
npm WARN notsup Unsupported engine for schema-utils@4.0.0: wanted: {"node":">= 12.13.0"} (current: {"node":"12.10.0","npm":"6.14.7"})
npm WARN notsup Not compatible with your version of node/npm: schema-utils@4.0.0

added 796 packages from 485 contributors and audited 801 packages in 31.148s

84 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


> @ dev /Applications/hogehoge
> npm run development


> @ development /Applications/hogehoge
> mix

Error: You are using an unsupported version of Node. Please update to at least Node v12.14
    at assertSupportedNodeVersion (/Applications/hogehoge/node_modules/laravel-mix/src/Engine.js:6:15)
    at executeScript (/Applications/hogehoge/node_modules/laravel-mix/bin/cli.js:61:5)
    at Command.<anonymous> (/Applications/hogehoge/node_modules/laravel-mix/bin/cli.js:47:13)
    at Command.listener [as _actionHandler] (/Applications/hogehoge/node_modules/commander/index.js:922:31)
    at Command._parseCommand (/Applications/hogehoge/node_modules/commander/index.js:1503:14)
    at Command._dispatchSubcommand (/Applications/hogehoge/node_modules/commander/index.js:1443:18)
    at Command._parseCommand (/Applications/hogehoge/node_modules/commander/index.js:1469:12)
    at Command.parse (/Applications/hogehoge/node_modules/commander/index.js:1292:10)
    at Command.parseAsync (/Applications/hogehoge/node_modules/commander/index.js:1318:10)
    at run (/Applications/hogehoge/node_modules/laravel-mix/bin/cli.js:50:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ development 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!     /hogehoge/.npm/_logs/2022-03-26T01_35_59_814Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev 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!     /hogehoge/.npm/_logs/2022-03-26T01_35_59_842Z-debug.log

経緯

php artisan jetstream:install livewire

でJetStreamをインストールすると、

Please execute “npm install && npm run dev" to build your assets.

というメッセージが出てくるため、npm install && npm run devを実行するも、

npm run devのコマンドを打ったところでエラーが発生していた

解決法

結論から書くと、nodeなどの各種パッケージをアップデートすることで成功しました

// まずはhomebrewをアップデート(けっこう時間がかかる)
> brew update
// nodebrewをアップデート
> brew upgrade nodebrew

// インストールできるバージョンを確認
> nodebrew ls-remote

// さいしんの安定ばんをインストール
> nodebrew install-binary v16.14.2

// 使えるリストを見る
> nodebrew list

// インストールした最新版に切り替える
> nodebrew use v16.14.2

各種パッケージが最新になったところで、改めてLaravelコマンドを叩く

> php artisan jetstream:install livewire

そして、改めて以下のコマンドを実行

> npm install && npm run dev

npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 

up to date, audited 800 packages in 18s

84 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice 
npm notice New patch version of npm available! 8.5.0 -> 8.5.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.5
npm notice Run npm install -g npm@8.5.5 to update!
npm notice 

> dev
> npm run development


> development
> mix

● Mix █████████████████████████ emitting (95%)  
 emit

● Mix █████████████████████████ done (99%) plugins 
 WebpackBar:done

✔ Mix
  Compiled successfully in 2.09s
                        
   Laravel Mix v6.0.43   
                         
✔ Compiled Successfully in 2061ms

無事成功しました

っていうかエラ〜メッセージを後でよく見返してみたら、原因はちゃんと書いてありました

You are using an unsupported version of Node. Please update to at least Node v12.14

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら