nuxtで出鼻くじかれたときの解決までの軌跡 #Node.js

問題発生

https://ja.nuxtjs.org/guide/installation
本家のインストレーションを参考にnuxtをほほいっとインストールした。

$ npm run dev

で、http://localhost:3000/ を立ち上げようとすると

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/{ユーザー名}/private/nuxt/node_modules/@nuxt/cli/dist/cli-command.js:32:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nuxt@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the nuxt@1.0.0 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!     /Users/{ユーザー名}/.npm/_logs/2019-09-05T09_19_48_002Z-debug.log

とエラーがでた...

ええぇ、、（困惑）

過程

とりあえずnpmを最新にしてみる

$ npm install -g n
$ sudo n latest

terminalに入力。

作られたディレクトリを削除しnpx create-nuxt-app nuxtをもう一度。

dyld: initializer function 0x0 not in mapped image for /usr/local/bin/node

Abort trap: 6

解決しなかった。

さっきよりコンパクトに拒否される。
ググるとダイレクトにヒットするものはなかったが、brewのせい..??
と雰囲気で感じ取った。

brewに問題があるか確認する

$ brew doctor

terminalに入力。

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

Warning: Your Xcode is configured with an invalid path.
You should change it to the correct path:
  sudo xcode-select -switch /Applications/Xcode.app

xcode周りでエラーがいくつか出た。
エラーがなくなるまで、brew doctorで確かめながら解決していく。

↓↓↓

Warning: "config" scripts exist outside your system or Homebrew directories.
`./configure` scripts often look for *-config scripts to determine if
software packages are installed, and which additional flags to use when
compiling and linking.

Having additional scripts in your path can confuse software installed via
Homebrew if the config script overrides a system or Homebrew-provided
script of the same name. We found the following "config" scripts:
  /Users/{ユーザー名}/.rbenv/shims/passenger-config

Warning: Unbrewed header files were found in /usr/local/include.
If you didn't put them there on purpose they could cause problems when
building Homebrew formulae, and may need to be deleted.

Unexpected header files:
  /usr/local/include/node/js_native_api.h
  /usr/local/include/node/js_native_api_types.h
  /usr/local/include/node/libplatform/libplatform-export.h
  /usr/local/include/node/libplatform/libplatform.h
  /usr/local/include/node/libplatform/v8-tracing.h

結局こんなエラーが残ってしまった。
node,node,node...と続いているのでhomebrewで管理しているnode.jsに関係がありそうだ。

node.js周りの解決

$ node -v
dyld: initializer function 0x0 not in mapped image for /usr/local/bin/node

Abort trap: 6

見覚えのあるエラー。やはりこいつが原因。。

$ brew reinstall node
{{{中略}}}
icu4c is keg-only, which means it was not symlinked into /usr/local,
because macOS provides libicucore.dylib (but nothing else).

If you need to have icu4c first in your PATH run:
  echo 'export PATH="/usr/local/opt/icu4c/bin:$PATH"' >> ~/.bash_profile
  echo 'export PATH="/usr/local/opt/icu4c/sbin:$PATH"' >> ~/.bash_profile

For compilers to find icu4c you may need to set:
  export LDFLAGS="-L/usr/local/opt/icu4c/lib"
  export CPPFLAGS="-I/usr/local/opt/icu4c/include"

For pkg-config to find icu4c you may need to set:
  export PKG_CONFIG_PATH="/usr/local/opt/icu4c/lib/pkgconfig"

なんとreinstallしようとしたらまたエラー
https://codechord.com/2018/09/solution_for_php_error_after_upgrade_homebrew/
↑によると、そういうエラーが発生するときもあるのだとか。今回は、エラーメッセージのとおりに.bash_profileに2つ環境変数を追加します。

そして、もう一度reinstall。

cp: /usr/local/Cellar/node/./12.9.1/bin/node: Permission denied
cp: /usr/local/Cellar/node/./12.9.1/lib/dtrace/node.d: Permission denied

なんとreinstallしようとしたらまたエラー

permissionを変えます。mojave環境だからか、/usr/local/の権限が変更できないので、sudo chown -R $(whoami) /usr/local/Cellar/で。

そして、もう一度reinstall。

Error: The `brew link` step did not complete successfully
The formula built, but is not symlinked into /usr/local

なんとreinstallしようとしたらまたエラー
brew linkできないと。既存ファイルがあるのでうまくできないらしい。
入れ直す前にアンインストールすればよかったかな。。

このファイル周り、わりとキリがないので

$ brew link --overwrite node

で、むりやり一気に解決。

$ node -v
v12.9.1

うん、解決した。

解決

$ npx create-nuxt-app nuxt
npx: 341個のパッケージを20.599秒でインストールしました。

$ npm run dev
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/{ユーザー名}/learn/nuxt/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/{ユーザー名}/learn/nuxt/package.jso
n'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/{ユーザー名}/.npm/_logs/2019-09-05T11_01_20_408Z-debug.log

おっと..！！?

..あ、カレントディレクトリ間違えてたわ。

$ cd nuxt/
$ npm run dev

上記を叩き込むと、、

おめでとうの予感..

http://localhost:3000/ を開いてみる。

キターーーーーーーーーー＼(^o^)／

解決しましたね！！！

要約

つまり今回$ npm run dev出来ずに、つまづいていた原因は

homebrew内部に問題が発生していた
インストールしているnode.jsに問題があった

の2つかと思います。
所感としては、MacOSをmojaveにアップグレードしたのにも原因がありそうです。

$ homebrew doctor
$ brew reinstall node

の2つのコマンドが解決に繋がりました!!