最近流行りのyarnをインストールしたらハマった話

こんばんわ、hisayukiです。
最近node界隈ではnpmの代わりにyarnが来ているとのこと。

こちらのQiitaとか見てもらうとメリットがまとまってるので参考までに

npmから乗り換えてわかったYarnの4つのメリット - Qiita

この記事は加筆・修正して「npmから乗り換えてわかったYarnの4つのメリット - ICS MEDIA」に引っ越しました。3万PV、280いいねとフロントエンド界隈でご好評いただいた内容です。ぜひ…

qiita.com

node界隈には疎いんですが、流行ってるしそんなにデメリットもなさそうなので突っ込みました(；´∀｀)
特別使いやすくなった感はないですが、インストールは早くなったみたいです。
そんなに体感わからんですが・・・・ｗｗｗ

そんなyarnを入れてハマった所を書いてきます。

結論

nodeを複数バージョン使ってる場合に考慮しなければならないことです。

yarn以外でnodeは使ってないよーって方には無関係かもですが、結構少ないんじゃないかなと思います。
あと、今は使ってないけど今後使うときにおそらくハマります。

環境

OSはMacです。
nodeの管理はnodebrewで行っていて、nodebrewもyarnもhomebrewでインストールしました。

ほかの環境で起きるかはわかりませんが、今回はおそらくhomebrewでインストールしたから起きた問題です。

起きた現象

$ sh build.sh 

> @ gulp /Users/hisayuki/vscode/**********
> gulp "serve:dist"

fs.js:27
const { Math, Object, Reflect } = primordials;
                                  ^

ReferenceError: primordials is not defined
    at fs.js:27:35
    at req_ (/Users/hisayuki/vscode/**********/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/hisayuki/vscode/**********/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/hisayuki/vscode/**********/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ gulp: `gulp "serve:dist"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ gulp 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/hisayuki/.npm/_logs/2019-05-09T11_01_14_579Z-debug.log

gulpが動かなくなりました😅
まぁ。。。2年前に作ったHTMLのbuild環境なのでお察しを。。。

もともと動いてたので、他の人の環境で試したら動いた。
違いを見たら自分の環境はnodeがv12.1.0に上がってた・・・ｗ

いつ入れたっけ・・・ってなりましたが、まぁnodebrewで管理してるので切り替えるだけ
なのでnodebrewで管理してるバージョンを確認してみた。

$nodebrew ls
v8.0.0
v8.1.0
v10.9.0
v11.14.0

current: v10.9.0

あれ、v12.1.0居ないやん・・・

しかも、currentはv10.9.0になってるし。
なんかおかしいと思いつつ、このあたりからハマり始める・・・

切り替わってないだけかもと思い、一旦v11.14.0に切り替える。

$ nodebrew use v11.14.0
use v11.14.0
$ node -v
v12.1.0

変わらねぇ・・・・

原因

どうやらv12.1.0はnodebrewでインストールしたものではない事がわかる・・・
一旦環境をキレイにしようと思いnodeを削除することに。

$ brew uninstall node
Error: Refusing to uninstall /usr/local/Cellar/node/12.1.0
because it is required by yarn, which is currently installed.
You can override this and force removal with:
  brew uninstall --ignore-dependencies node

because it is required by yarn, which is currently installed.

お前かｗ

調べていった結果ここにたどり着いた

brew install yarn --without-node してもnodeがインストールされる。 - Qiita

##　追記(2019/2/19)@ys-0-sy さんからコメントいただきました。yarn公式のインストレーションガイドによると，node.jsをインストールした状態で$brew instal…

qiita.com

どうやらyarnをhomebrewでインストールのした際にnodeをインストールしてしまうみたい。
その際にnodeのPATHをyarnが使うnodeのPATHにしてしまうので、nodebrew側のnodeが使われなくなってしまう模様。

なのでnodebrewで管理しつつyarnを入れたい場合は、yarnのインストール時にnodeの依存関係を無視させないと行けない。

対策

まずはyarnのアンインストール

$ brew uninstall yarn

次にnodeのアンインストール

$ brew uninstall node

アンインストール後にPATHが変更されているので.bash_profileの再読み込み。

$ source ~/.bash_profile 

これをやらないとnodeのPATHは消えてても、nodebrewのPATHに見る先を変えてくれない。
この状態でnodeのバージョンを確認する。

$ node -v
v11.14.0

先程切り替えたv11.14.0に変わってます🌟

最後にyarnをhomebrewで入れ直し。
この際にオプションに–ignore-dependenciesをつけることで、依存関係のあるPackageを無視してインストールできる。

$ brew install yarn --ignore-dependencies

これでyarnとnodebrewの共存が可能になった❗

$ yarn -v
1.15.2
$ which node
/Users/hisayuki/.nodebrew/current/bin/node

まとめ

yarnインストールの際には現状仕様しているnodeのバージョンに気をつけましょう❗
もし、古いnodeバージョンを利用する場合は依存関係を外してyarnをインストールしましょう❗

あとは今回の場合ならbuild環境だけdockerにするとかでもいいですねw