いつも、laravel+Vue.jsでSPAを作る時、プロジェクトのあるディレクトリに移動してから$ php artisan serveでlocalhost:8000を立ち上げ、ターミナルの別ウィンドウでプロジェクトのあるディレクトリに移動してから$ npm run watchをしてlocalhost:3000を開いて、書いたコードがどの様に反映されるか確認しながらやってた。
でも突然、なぜかエラーがいっぱい出て、localhost:3000がブラウザで開かなかった。
今回は、そんな時の解決法を備忘録として書いておこうと思います。
エラーの詳細
入力後の出力結果はこちら。
$ npm run watch
Error: Missing binding ここは割愛/node_modules/node-sass/vendor/darwin-x64-72/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 12.x
Found bindings for the following environments:
- OS X 64-bit with Node.js 10.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
at module.exports (ここは割愛/node_modules/node-sass/lib/binding.js:15:13)
at Object.<anonymous> (ここは割愛/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (ここは割愛/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (ここは割愛/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at Object.<anonymous> (ここは割愛/webpack.mix.js:11:21)
at Module._compile (ここは割愛/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (ここは割愛/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at Object.<anonymous> (ここは割愛/node_modules/laravel-mix/setup/webpack.config.js:12:1)
at Module._compile (ここは割愛/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (ここは割愛/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at WEBPACK_OPTIONS (ここは割愛/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
at requireConfig (ここは割愛/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
at ここは割愛/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
at Array.forEach (<anonymous>)
at module.exports (ここは割愛/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
at ここは割愛/node_modules/webpack-cli/bin/cli.js:71:45
at Object.parse (ここは割愛/node_modules/webpack-cli/node_modules/yargs/yargs.js:576:18)
at ここは割愛/node_modules/webpack-cli/bin/cli.js:49:8
at Object.<anonymous> (ここは割愛/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:1138:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
な…長い。
冷静に、エラーメッセージを読み解いてみる
こんなに長いメッセージが出ると萎えちゃってやめたくなりますが、此処はひとつ冷静に読み解いてみます。
まず注目したのは序盤のメッセージです。
Error: Missing binding ここは割愛/node_modules/node-sass/vendor/darwin-x64-72/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 12.x
Found bindings for the following environments:
- OS X 64-bit with Node.js 10.x
これによると、どうやらNode.jsのバージョンが今は12系になっているけれど、前は10系使ってたじゃん！
と言っている模様です。
あまり記憶はないのですが、そういえば最近、nvmで他のアプリケーションを作ろうとNode.jsの環境を変更しました。(浮気者ですね)
今はNode.jsをグローバルのバージョンを見に行く様になっているので、こういうことが起きるんですね。(多分)
ローカルでバージョンをそれぞれ分けるとかやれる様になるといいんですがね。今後の課題です。。
さらにその下の行を読み進めます。
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
nom installをしてから、環境が変わるとこれが起きますよ。
$ npm rebuild node-sassを実行して、現在の環境用のバインディングをダウンロードしてね、とのこと。
なるほど。
それだけでいいのですか。
$ npm rebuild node-sass
Binary found at ここは割愛/node_modules/node-sass/vendor/darwin-x64-72/binding.node
Testing binary
Binary is fine
node-sass@4.14.1 ここは割愛/node_modules/node-sass
これで、また$ npm run watchすれば、ちゃんとlocalhost:3000の画面がブラウザで立ち上がりました！
よかったよかった。