概要

nodebrew, nodenvが環境に混在していたので、整理してnodenvに切り替えを行い、同時にnodenv経由でyarnをインストール出来るようにした備忘録

事前準備 nodebrewの削除

nodebrewをアンインストール

$ brew uninstall nodebrew

~/.bash_profile に書いてあるnodebreのPATHを消す

$ vi ~/.bash_profile

PATH=$HOME/.nodebrew/current/bin:$PATH #ここのPATHを消す

bash_profileを編集したら更新する

source ~/.bash_profile

node, yarn, npm、nodenvのversionを確認し、このように真っ白な状態になればok

$node -v
-bash: node: command not found
$yarn -v
-bash: yarn: command not found
$npm -v
-bash: npm: command not found
$nodenv -v
-bash: nodenv: command not found

nodeがまだ存在している場合
・ターミナルを再起動する
・pathの参照先を削除する

$ which node
/Users/[USER_NAME]/.nodebrew/current/bin/node
# 以下コマンドはディレクトリを間違えると全て消えてしまうので注意
$rm -rf /Users/[USER_NAME]/.nodebrew

またbrewlistでnodenv, node-buildが存在していたらアンインストールする

$ brew list
# nodenv, node-buildが存在する場合
$ brew uninstall nodenv
$ brew uninstall node-build

nodenvのインストール

$brew install nodenv
$nodenv -v
nodenv 1.4.0
$which nodenv
/usr/local/bin/nodenv
$ nodenv init

~/.bash_profileに設定する

$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile

以下で状況をチェックできる

$ curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash

以下のようにokが表示されたらok

Checking for `nodenv' in PATH: /usr/local/bin/nodenv
Checking for nodenv shims in PATH: OK
Checking `nodenv install' support: /usr/local/bin/nodenv-install (node-build 4.9.7)
Counting installed Node versions: 2 versions
Auditing installed plugins: OK

nodenv-yarn-installの設定

nodenvがインストール出来たので、nodenv-yarn-installをインストールする

$ mkdir -p "$(nodenv root)/plugins"
$ git clone https://github.com/pine/nodenv-yarn-install.git "$(nodenv root)/plugins/nodenv-yarn-install"

nodeのインストール

準備が整ったのでインストールしたいnodeバージョンをインストールする

$ nodenv install 10.17.0

すでにインストールされているnodeはyarnがインストールされていないので、アンインストールし、再度インストールする

$ node -v
nodenv: node: command not found
The `node' command exists in these Node versions:
  10.15.3
  10.17.0
  12.10.0
$ nodenv uninstall 10.15.3
$ nodenv uninstall 12.10.0
$ nodenv install 10.15.3
$ nodenv install 12.7.0

グローバル（通常使用する方）を設定。

$ nodenv global 12.7.0
$ node -v
v12.7.0

yarnがインストールされていることも確認出来ました

$ yarn -v
1.22.5
$ which yarn
/Users/[username]/.nodenv/shims/yarn

参考記事

https://qiita.com/mame_daifuku/items/1dbdfbd4897b34df0d9f
https://qiita.com/ttokdev/items/3547587b0494dd624901
https://stackoverflow.com/questions/4608187/how-to-reload-bash-profile-from-the-command-line

create-react-app アプリ名

でアプリを作り、いざ起動。

npm start

あれ、実行できない？？

以下エラー文。

Starting the development server...

dyld: lazy symbol binding failed: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

dyld: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cycle@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cycle@0.1.0 start 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/user/.npm/_logs/2020-09-10T15_49_19_237Z-debug.log

まずはいかに注目。

npm ERR! code ELIFECYCLE
npm ERR! errno 1
(以下略)

Google検索にエラー文を貼り付けてみたが、解決する方法が見つからない。。。。

次にいかに注目して検索。。。

dyld: lazy symbol binding failed: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

dyld: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

解決できそうな記事を発見！！

でも、

記事のエラー文
  Referenced from: /Users/bunnyxt/Projects/njauiot-frontend/node_modules/fsevents/build/Release/fse.node

実際のエラー文
 Referenced from: /Users/user/Documents/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node

と微妙に異なっていて、うまく解決しない。。。

うーん困った。。。。

node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node

いっそfsevents以下のディレクトリを削除すればいいのでは？　との記事を発見。

実行。

解決！！

ついでに、HOSTが固定されていたので

unset HOST

これでサーバーの指定を解除。

この状態で再度

npm start

を実行。

プレビューがうまく表示されました！！！