npm run devがvite laravel 9で機能しない

Laravel errors 環境構築 Node npm

エラー内容

MAMP環境でlaravel breezeインストールcomposer require laravel/breeze:^1.13 --dev、npm run dev時にエラー

owner@MacBook-Pro task_test % npm run dev

> @ dev /Applications/MAMP/htdocs/laravel/task_test
> vite

/Applications/MAMP/htdocs/laravel/task_test/node_modules/vite/bin/vite.js:2
import { performance } from 'node:perf_hooks'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)

解決方法

ぐぐったらstackoverflowの記事がヒット

laravel 9ドキュメントを見ると laravelでviteを使用するにはNode.js ( 16 + )およびNPMがインストールされていることを確認する必要があります。
バージョンを確認すると12なので、node.jsのバージョンが古すぎてエラーがおきている可能性がある。

owner@MacBook-Pro task_test % node -v
v12.14.0
owner@MacBook-Pro task_test % npm --version
8.19.2

node.jsをアップデートするにはnodebrewが必要
homebrewでインストールする

owner@MacBook-Pro task_test % brew install nodebrew
Running `brew update --auto-update`...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/cask-fonts).
==> New Formulae

owner@MacBook-Pro task_test % nodebrew -v
nodebrew 1.2.0

公式からlatestバージョンを確認する

latestバージョンをインストールし、確認する。

owner@MacBook-Pro task_test % nodebrew install-binary v18.12.0 
Fetching: https://nodejs.org/dist/v18.12.0/node-v18.12.0-darwin-x64.tar.gz
Warning: Failed to create the file 
Warning: /Users/owner/.nodebrew/src/v18.12.0/node-v18.12.0-darwin-x64.tar.gz: 
Warning: No such file or directory
curl: (23) Failure writing output to destination

Installed successfully

owner@MacBook-Pro task_test % nodebrew list
v18.12.0

問題1

download failed: https://nodejs.org/dist/v18.12.0/node-v18.12.0-darwin-x64.tar.gzエラーが出た場合。
下記コマンドでnodebrew用のディレクトリを作る必要がある。

owner@MacBook-Pro task_test % mkdir -p ~/.nodebrew/src

owner@MacBook-Pro task_test % nodebrew install-binary v18.12.0 
Fetching: https://nodejs.org/dist/v18.12.0/node-v18.12.0-darwin-x64.tar.gz
######################################################################### 100.0%
Installed successfully

#バージョン指定
owner@MacBook-Pro task_test % nodebrew use v18.12.0
use v18.12.0

問題2:node -vで表示されるバージョンが異なる。

node -v コマンドを実行した時、nodebrew use で指定したものと異なるバージョンが表示される

 $ nodebrew use v18.12.0
use v18.12.0 

 $ node -v              
v12.14.0

結論

homebrewでインストールされてるか、nodebrewでインストールされているかの問題で
zshにnodebrewのPATHを通したらバージョン切り替えができるようになった。

zshでPATHを通す

viエディタでPATHを追加する。インサートモードi、保存:wq。

vim ~/.zshrc

export PATH=$HOME/.nodebrew/current/bin:$PATH


シェルの再読み込み

$ source ~/.zshrc

確認

$ node -v
v18.12.0
$ npm -v
8.19.2

無事にバージョンが切り替わり、npm run devも正常に動作を確認。