【解決】nuxtでyarnをすると「gyp: No Xcode or CLT version detected!」エラーが発生

5849 ワード
nuxt vue-cli YARN Node.js macOSCatalina Node.js テキストリンク

追記

本記事で解決できないとコメント頂きました。
@isacRU さんに解決方法を共有頂いたのでそちらも参考にして頂けると嬉しいです

環境

  • macOS Catalina 10.15.3 (zsh)
  • node.js v10.15.2
  • yarn 1.21.1
  • vue/cli 4.1.1

事象

nuxt + typescript + vuetify環境を作成するために、以下のテンプレートを使用しました。
https://github.com/nuxt-community/typescript-template

そこでyarnコマンドを実行すると以下のエラーが発生し正常に起動できませんでした。

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/dmorita/.nodebrew/node/v10.15.2/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack     at ChildProcess.emit (events.js:189:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Darwin 19.3.0
gyp ERR! command \"/Users/dmorita/.nodebrew/node/v10.15.2/bin/node\" \"/Users/dmorita/.nodebrew/node/v10.15.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\"
gyp ERR! cwd /Users/projects/XXXX/client/node_modules/watchpack/node_modules/fsevents
gyp ERR! node -v v10.15.2
success Saved lockfile.
✨  Done in 156.15s.

yarnとしては、Xcodeが見つからないだけなのでsuccessとなってしまうのですが、yarnやnpm辺りに色々と不具合が起こるので解消したいと思います。
私の場合は以下の2stepで解消しました。

Step1

まずは、エラー内容「No Xcode or CLT version detected!」の通りにXcodeとCLTを確認

% xcode-select --install
xcode-select: error: command line tools are already installed, use "Software Update" to install updates

もちろんインストール済みですと。
私の場合、Catalinaにアップデートしてから多々不具合がありました。
こちらを参考に再インストールしました。
https://github.com/nodejs/node-gyp/blob/master/macOS_Catalina.md#i-did-all-that-and-the-acid-test-still-does-not-pass--

Step2

それから再度上記のテンプレートで yarn コマンドを叩くと以下のエラーが発生しました。

xcrun: error: active developer path (\"/Applications/Xcode.app/Contents/Developer\") does not exist
Use `sudo xcode-select --switch path/to/Xcode.app` to specify the Xcode that you wish to use for command line developer tools, or use `xcode-select --install` to install the standalone command line developer tools.
See `man xcode-select` for more details.
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (/Users/dmorita/.nodebrew/node/v10.15.2/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:189:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Darwin 19.3.0
gyp ERR! command \"/Users/dmorita/.nodebrew/node/v10.15.2/bin/node\" \"/Users/dmorita/.nodebrew/node/v10.15.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\"
gyp ERR! cwd /Users/projects/XXXX/client/node_modules/watchpack/node_modules/fsevents
gyp ERR! node -v v10.15.2
success Saved lockfile.
✨  Done in 150.93s.

え？パスが存在しないだと？
え？CLTのパスじゃなくてXcodeのパスだと？
となり、確認したところ

% xcode-select -print-path                    
/Applications/Xcode.app/Contents/Developer

CLTが参照しているのがXcode.appのDeveloperでした。
この原因の推測としては、過去に Xcode.app→CLT の順にインストールを行ったためXcode.appが先に決定されていたのだと思います。

こちらを参考に参照先のパスをCLTに変更しました。
https://stackoverflow.com/questions/17980759/xcode-select-active-developer-directory-error

% sudo xcode-select -switch /Library/Developer/CommandLineTools

以上

この状態で再度 yarn コマンドを叩くと

% yarn
yarn install v1.21.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning nuxt > @nuxt/webpack > @nuxt/babel-preset-app > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has unmet peer dependency "vue@^2.5.0".
warning " > [email protected]" has unmet peer dependency "vuex@^3.0.0".
warning " > [email protected]" has unmet peer dependency "vue-class-component@^6.0.0 || ^7.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 150.13s.

と正常に完了しました。
CatalinaになりNode.js周りで苦しんでる方の悩みが解消できたら幸いです👏