やろうと思ったこと
npx create-react-app xxxxで環境構築
事象
npx create-react-app xxxx
や
npm install -g create-react-app(←現在は非推奨)
を叩いた時に下記エラーが出た。
とりあえず、最新のnodeやcreate-react-appを入れ直してみたものの、解消せず。
前は動いてたのになんで...!?
yarn add v1.15.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error eslint@6.1.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "11.3.0"
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
調査
エラー内容としてはnodeのverが不適合とのこと。
さっき最新(v11.3.0)にしたのにな〜、、、
という安易に考えていたのがダメでしたね(恥)
node.jsのリリースには下記のような区分があり、v11.3.0は2019年8月現在ではまだ推奨版であるLTS対象ではないようです。なので最新のLTS対応Verに変更すれば良さそう?です。
1.Current(最新) : 最新版Verだが、安定性には欠く
2.LTS : Node.js projectにより長期的に保守・運用される対象となっているVer
→ 2-1. Active(推奨版) : 保守やアップグレードが積極的に行われているVer
→ 2-2. Maintenance(保守) : 最低限のサポートはされるが、もうそろそろ終わりという感じ
最新のLTS
じゃあ最新LTSであるかはどこで判断するのかというと、こちら。
https://nodejs.org/ja/download/
本記事執筆時点では最新のバージョン: 10.16.2 (同梱 npm 6.9.0)のようです。
また、リリース一覧も見てみましょう。
https://nodejs.org/ja/download/releases/
本記事執筆時点ではリストの一覧にNode.js 10.16.2 Dubniumと書いてあり、かつ最新LTSとなっています。
(Dubniumというのは最新LTSにつけられたコードネームのようですね)
リリースのライフサイクル
ちょっと横道にそれますが、node.jsのLTSリリースには下記のサイクルがあるようです。
1. リリース後最初の半年を「Current」
2. 次の1年半を「Active」
3. その次の1年が「Maintenance」
また、リリースナンバーは法則があり、
・ 奇数バージョンは最新機能版(ex. Node.js 7, Node.js 9, Node.js 11)
・ 偶数バージョンが長期サポート版(ex. Node.js 8, Node.js 10, Node.js 12)
となっているようです。
対応
LTSではないVerのnodeを使用しており、今回のエラーが発生したと思われるので、
node.jsのVerを変えるためにnvmをインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
macの場合は.bash_profileに下記を追加
export NVM_DIR="${XDG_CONFIG_HOME/:-$HOME/.}nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
最新のLTSをインストール
nvm install --lts
nvm use --lts
node -v
これで最新LTSが入り、npx create-react-app xxxxが動きました。
また、別フォルダを作成してそこでnpx create-react-app xxxxを叩こうとした時に、再度nodeがCurrent Verになっていたら上記nvmコマンドでLTSにして実行するとOKです。
参考
・【解決】yarn addでwebpackを追加する時にエラーが出た話
・Understanding How Node.js Release Lines Work
・nvm + Node.js + npmのインストール