EAS buildの苦悩

さて、アプリは作成できたとして、いざビルドしようとしたところ、Androidプログラミングと違って、いろいろエラーが出るわ出るわでした。

 

人によって違うかとは思いますが、Exp44での話と、Exp49(現在最新バージョン)での話を書かせてもらいます。EAS buildで躓いている方の一助になればと思います。

 

まず、Expo44の話です。

現在のスマホ側のExpo goアプリは普通にGoogle Play storeからダウンロードすると、Exp46以上しか対応していません。

このため、下記の方法をとっています。

Android Studioをダウンロード、インストールし、Android SDKをPCに入れることで、SDKのplatform-toolsにパスを通しておくことで、その中のabdコマンドが使用でき、それを用いて、スマホとUSBケーブルをつなぎます。

スマホの中に通常のGoogle play storeから入れたExpo goがあればアンインストールしておく必要があります。

スマホを開発者オプションを有効にし、USBデバックを許可します。

VScodeのターミナルで npm start とします。

⑤ そのあと a コマンドで android studioを立ち上げます。後は自動で行われます。

 

では、EASビルドしたときの経験したエラーと解決のヒントを記載します。

その前にエラーに対する対処の一般知識が必要です。下記のYoutube動画のエラーの対処のところが簡単で有用です。

プログラミングスキルが高い人の4つの特徴!スキルを高める方法も紹介 - YouTube

 

それでは、エラーについて例をあげていきます。

<エラーの1例>

[stderr] 

While resolving: @react-native-community/masked-view@0.1.10

[stderr] 

npm ERR! Found: react@17.0.1

[stderr] 

npm ERR! node_modules/react

[stderr] 

npm ERR!

[stderr] 

react@"17.0.1" from the root project

[stderr] 

npm ERR!   peer react@"*" from @react-navigation/bottom-tabs@5.11.15

・・・①

[stderr] 

npm ERR!   node_modules/@react-navigation/bottom-tabs

[stderr] 

npm ERR!     @react-navigation/bottom-tabs@"^5.11.0" from the root project

・・・①’

[stderr] 

npm ERR!   13 more (@react-navigation/core, @react-navigation/native, ...)

[stderr] 

npm ERR! 

[stderr] 

npm ERR! Could not resolve dependency:

[stderr] 

npm ERR! peer react@"^16.0" from @react-native-community/masked-view@0.1.10

・・・②

[stderr] 

npm ERR! node_modules/@react-native-community/masked-view

[stderr] 

npm ERR!   @react-native-community/masked-view@"0.1.10" from the root project

[stderr] 

npm

[stderr] 

ERR!   peer @react-native-community/masked-view@">= 0.1.0" from @react-navigation/stack@5.14.9

[stderr] 

npm ERR!   node_modules/@react-navigation/stack

[stderr] 

npm ERR!     @react-navigation/stack@"^5.12.5" from the root project

[stderr] 

npm ERR! 

[stderr] 

npm ERR! Conflicting peer dependency: react@16.14.0

[stderr] 

npm ERR! node_modules/react

[stderr] 

npm ERR!   peer react@"^16.0" from @react-native-community/masked-view@0.1.10

[stderr] 

npm ERR!   node_modules/@react-native-community/masked-view

[stderr] 

npm ERR!     @react-native-community/masked-view@"0.1.10" from the root project

[stderr] 

npm ERR!     peer @react-native-community/masked-view@">= 0.1.0" from @react-navigation/stack@5.14.9 ・・・③

[stderr] 

npm ERR!     node_modules/@react-navigation/stack

[stderr] 

npm ERR!       @react-navigation/stack@"^5.12.5" from the root project

 

よくわからないが、bottom-tabsライブラリのバージョンを書いてあるものに上げたほうが、すべてのreactに対応できるということを言いたいらしい

→解決として、5.11.15に上げました。

 

②→今のmasked-view@0.1.10ライブラリだとreact@16と対応とのことらしい。

 解決として、0.1.11に上げました。

 

③→masked-viewライブラリの0.1以上のバージョンを使用するなら、@react-navigation/stackは 最低、@5.14.9にはしておきなさいということらしい

→5.14.9に上げました。

ちなみに、React Nativeは、0.64.3です。

これでビルドできました。

 

 

Expo49での話に移ります

<エラーの1例>

[stderr] 

FAILURE: Build failed with an exception.

[stderr] 

* What went wrong:

[stderr] 

Execution failed for task ':expo-splash-screen:compileReleaseKotlin'.

[stderr] 

> A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction

[stderr] 

   > Compilation error. See log for more details

 

このエラーは有名だそうで、React Nativeのバージョンが 0.71.0以上の際に起こるので、それに対するパッチ記述の追記でエラーが解消されます。

node_modulesフォルダ内のexpo-modules-coreのandroidフォルダ内のbuild.gradleファイルに追記します。(androidフォルダは、expoにもありますが、こちらではないです)下記が追記例です。わかりにくいといけないので、前後すべて貼り付けてますが、追記するのは、①と②です。

group = 'host.exp.exponent'
version = '1.5.9'

def REACT_NATIVE_VERSION = new File(['node', '--print',
                     "JSON.parse(require('fs')
                      .readFileSync(require.resolve('react-native/package.json'), 'utf-8'))
                      .version"].execute(null, rootDir).text.trim())
・・・・①
buildscript {
  def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
  if (expoModulesCorePlugin.exists()) {
    apply from: expoModulesCorePlugin
    applyKotlinExpoModulesCorePlugin()
  }

  // Simple helper that allows the root project to override versions declared by this library.
  ext.safeExtGet = { prop, fallback ->
    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
  }

  // Ensures backward compatibility
  ext.getKotlinVersion = {
    if (ext.has("kotlinVersion")) {
      ext.kotlinVersion()
    } else {
      ext.safeExtGet("kotlinVersion", "1.8.10")
    }
  }

  repositories {
    mavenCentral()
  }

  dependencies {
    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getKotlinVersion()}")
    classpath("de.undercouch:gradle-download-task:5.3.0")
  }
}

allprojects {
    configurations.all {
          resolutionStrategy {
            force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
          }
    }
    // ...  
}・・・・②