久しぶりにReact Nativeのプロジェクトを作ろうとしてnodeのバージョンを上げた話とか

久しぶりにreact-native init myprojectという感じで新しいReact Nativeのプロジェクトを作ろうとしてハマったのでメモ。

 

[遭遇したエラー]

エラーの前に、環境情報を。 

$ react-native --version
react-native-cli: 2.0.1
react-native: 0.57.5

 

react-native init myprojectを実行した際に、次のエラーがでた。

error sane@3.1.0: The engine "node" is incompatible with this module. Expected version "6.* || 8.* || >= 10.*".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
{ Error: Command failed: yarn add react-native --exact
    at checkExecSyncError (child_process.js:575:11)
    at execSync (child_process.js:612:13)
    at run (/usr/local/lib/node_modules/react-native-cli/index.js:294:5)
    at createProject (/usr/local/lib/node_modules/react-native-cli/index.js:249:3)
    at init (/usr/local/lib/node_modules/react-native-cli/index.js:200:5)
    at Object. (/usr/local/lib/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 9042,
  stdout: null,
  stderr: null }
Command `yarn add react-native --exact` failed.

 

エラーメッセージによれば、nodeのバージョンが6系、8系、または10以上である必要がある、と。Githubに同様のissueが上がっていた。 

github.com

 

どうやらこの変更が問題らしい。

[fixes #123] Drop support for unsupported versions of node by stefanpenner · Pull Request #125 · amasad/sane · GitHub

しかしこの変更はいかにして自分のマシンに取り込まれたんだろう?最近yarnをアップデートした記憶もないし……React Nativeのプロジェクトを1ヶ月ほど前に作った時には問題なく作れたし。謎。

 

[nodeのLTSサポート状況]

nodeのバージョンを確認すると、次の通りだった。

$ node -v
v9.4.0

 

公式サイトを見ても、確かにサポート対象外のバージョンであった。2018年6月30日でサポート終了を迎えている。

f:id:kidani_a:20181115200451p:plain

 

現在のLTSはv10.13.0、最新版はv11.1.0のようだ。つい一昨年くらいまでは0.10.xだったのに……。フロントエンドの世界は本当に進みが早い。

nodejs.org

 

[nodeのバージョンアップ]

謎は色々あるものの、React Nativeプロジェクトを作成するためには避けて通れなさそうなので、nodeのバージョンアップを試みる。nodebrewだのnvmだのnだのndenvだのといった高級なnode専用バージョン管理システムは使っていないので、単にbrew upgrade nodeコマンドを実行する。

 

$ brew upgrade node
...(略)...
==> Upgrading 1 outdated package:
node 9.4.0 -> 11.1.0
==> Upgrading node
==> Installing dependencies for node: icu4c
...(略)...
==> node
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

 

無事にアップグレードが完了し、v11.1.0になった。version >= 10.*という要件を満たしている。

f:id:kidani_a:20181115201341p:plain

 

再度react-native init myprojectを実行すると、無事プロジェクトが作成された。

別のプロジェクトで利用していた依存モジュールをpackage.jsonに追加し、途中まで作っていたコードを引っ越して、無事にシミュレータでアプリを起動することができた。

f:id:kidani_a:20181115201809p:plain

 

作っているのはPixelaを利用したネイティブアプリ。習慣化にもってこいだと思ったので #100DaysOfCodeチャレンジがてら実装を進めていたのだが、色々あってシミュレータでアプリを起動できなくなったので、プロジェクトから作り直した、というわけ。

pixe.la

 

[まとめ]

・nodeのバージョンは定期的にあげると良さそう 

 

今日のブログ執筆BGMはこちら。

www.youtube.com