⚠️

WSL2+ReactNative関連のエラーと対処法まとめ

2023/10/14に公開

React Native

WSL 2

tech

GradleとJDKのいる場所がそれぞれ違う

エラー

Gradle JVM option is incorrect: 'C:/Program Files/Android/Android Studio/jre'.
The project is located on WSL.
Use the JDK installed on the same WSL distribution.

Windows上のJDKとWSL上のJDKは互換性がないらしい
JDKはmsopenjdk17を使う
面倒なのでWSL2ではLinux用AndroidStudioを使う

Linux用AndroidStudioを使う

↓ダウンロードサイトでLinux向けのURIをコピーしておく（ポリシー許諾する必要あり）

# ダウンロードと展開
cd ~/Downloads
wget <ダウンロードURI>
tar -zxvf ./android-studio-<名前>-linux.tar.gz
rm ./android-studio-<名前>-linux.tar.gz
# 移動
sudo mv ./android-studio /usr/local
# 起動
/usr/local/android-studio/bin/studio.sh

MoreActions > SDK Managerで必要なものをいれる
今回はTiramisu(API33)とcommand line toolsを入れた
Device Managerから新しくcreateする
ただ、起動にはKVMが必要
KVM(Kernel-based Virtual Machine): Linux上で仮想化環境を構築するための基盤となるソフトウェア

KVMを入れる

sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils

GUI表示にWin-KeXも必要かもしれない

PATH通すなどはreact-native公式のドキュメントなどを参照(.zshrcなどを編集)

react.gradleの使用が非推奨になった

エラー

Using react.gradle in your project is deprecated! You should move to "apply plugin: com.facebook.react"
react.gradle is going to be removed in a future React Native project and your project will not build anymore.
You can use the template as a reference:
https://github.com/facebook/react-native/blob/main/template/android/app/build.gradle

エラー

Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'.
   > Could not find any matches for com.facebook.react:react-native:+ as no versions of com.facebook.react:react-native are available.
     Required by:
         project :app

android/app/build.gradleファイル（android/build.gradleファイルではない）に以下のコードを追加する。

apply plugin: "com.android.application"
apply plugin: "com.facebook.react" // これを追加
import com.android.build.OutputFile

javaのバージョンが新しすぎる

エラー

Could not open settings generic class cache for settings file 
> BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 65

現時点でopenjdk 21だとだめ？
javaのバージョンを17にする

sudo apt install msopenjdk-17
sudo update-alternatives --config java

AndroidStudioのJDKバージョンも変更
Preferences -> Build -> Build Tools -> Gradle -> Gradle JDK

デバイスが見つかず起動できない

エラー

> com.android.builder.testing.api.DeviceException: No connected devices!

iOSシミュレータと違い、Androidは先にシミュレータを立ち上げてから実行する必要がある
adb devicesコマンドでemulator-5554などがでれば立っている
しかしそれでもNo connected devices!とでる場合もある
以下のようなエラーもでていた

エラー

error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.

adb devicesでは表示されるが、emulator -list-avdsでは表示されない
ということはAVDがWSL側に作られていない
WSL側にAndroidStudioが入ってるか確認し、WSL側でAVDを作られているかも確認する

sdkmanagerやavdmanagerを起動しようとするとエラーがでる

エラー

Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
        at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
        at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
        at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
        at com.android.sdklib.tool.AvdManagerCli.run(AvdManagerCli.java:213)
        at com.android.sdklib.tool.AvdManagerCli.main(AvdManagerCli.java:200)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:525)
        ... 5 more

PATHの指定は、tools/binではなくcmdline-tools/latest/binを使う

.zshrc

# ---------------------------------
# AndroiSDK
export ANDROID_HOME=$HOME/Android
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
#export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
# ---------------------------------

書き換えたら適用して確認

source ~/.zshrc
which avdmanager

KVMの利用権限がない

エラー

ProbeKVM: This user doesn't have permissions to use KVM (/dev/kvm).
The KVM line in /etc/group is: [kvm:x:107:]

ERROR   | x86_64 emulation currently requires hardware acceleration!
CPU acceleration status: This user doesn't have permissions to use KVM (/dev/kvm).
The KVM line in /etc/group is: [kvm:x:107:]

# 以下の結果で一番右の:のあとに自身のユーザ名がない=権限がない
grep kvm /etc/group
# 必要なパッケージを入れる
sudo apt install qemu-kvm
# ユーザをKVMグループに追加する
sudo adduser $USER kvm
# まだ拒否されるなら
sudo chown $USER /dev/kvm

node_modulesの権限がない

プロジェクトをコピペしたときにでたりする

エラー

Error: spawnSync /home/user/prj/ride-share/apps/driver-mobile/node_modules/@react-native-community/cli/setup_env.sh EACCES

権限を与える

chmod -R 777 node_modules

他にもchmod -R 777 androidなどしたほうがいい場合も