React Native Debuggerで"DevTools v4 is incompatible with this version of React"のエラーが出る時の対処法

はじめに

React Nativeで開発をしている時、今まではブラウザでデバッグしていましたが
React Native Debuggerというものがあることを知り、使ってみたらなかなか良かったのですが
導入時に(私のような)初心者だとひっかかるエラーがあったので対処法を残しておきます。

環境

Expo 37で開発

package.json

"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",

React Native Debuggerのインストールコマンドは以下を実行

$ brew update && brew cask install react-native-debugger

エラー内容

Readt Native Debuggerの左下のところに以下のエラーが発生

DevTools v4 is incompatible with this version of React
Either upgrade React or install React DevTools v3:

npm install -d react-devtools@^3

どうやら、DevTool v4とReactのバージョンが合っていないのでDevToolsのv3をインストールせよ、とのこと。

間違った対処法

エラーでググって出てきたそれらしい対処法を試してみる

npm uninstall -g react-devtools
npm install -g react-devtools@^3

やっていることは、今のdevtoolをアンインストールして、devtoolのv3をインストールしているので一見間違っていないように見えるが、ここでReact Native Debuggerを起動してもエラーは解消されない。

原因

まずはReact Native Debuggerの公式をみると、

To use this app you need to ensure you are using the correct version of React Native Debugger and react-native:

React Native Debugger	react-native
>= 0.11	>= 0.62
<= 0.10	<= 0.61

react-nativeのバージョンが0.62以上の時は、React Native Debuggerは0.11以上を使い、
react-nativeのバージョンが0.61以下の時は、React Native Debuggerは0.10以下を使うとのこと。

ExpoのSDKの中にReact Nativeが入っているので、Expo 37の記事でバージョンを確認すると

Today, we’re announcing our first release of the decade! 💐🌸 Expo SDK v37.0.0 🌸🌷 (which uses React Native 0.61 internally) is our Spring release, but also inaugurates a new, bolder approach to empowering developers.

Expo 37はReact Native 0.61を使っているので、Debuggerは0.10を使わないといけないはずです。


ここで思い出してほしい、Debuggerをインストールするこのコマンド

$ brew update && brew cask install react-native-debugger

これでは最新版のreact native debuggerをインストールしてしまうのでdebuggerとreactのバージョン違いで動かなくて当然です。

正しい対処法

まずは今入っているreact native dubuggerをアンインストール
(コマンドでアンインストールしないと色々残ってしまい0.10の再インストールがうまくいきません)

$ brew cask uninstall react-native-debugger

React Native Debuggerの公式によると、今回必要なv0.10以前のDebuggerのインストールは
以下のコマンドで実行できる

$ brew update && brew cask install https://raw.githubusercontent.com/caskroom/homebrew-cask/b6ac3795c1df9f97242481c0817b1165e3e6306a/Casks/react-native-debugger.rb

これでv0.10がインストールされ、無事エラーがなくなりました。