[開発報告] 3/11〜3/18 ライブラリの大幅アップデート！それに伴いエラー多発（泣）

2023年3月30日 2024年9月3日

はじめに
”てがきdeよせがき”とは？
成果報告
まとめ

はじめに

お久しぶりです。CCcampのC.Cです！

最近はリアル仕事がコロナ、インフルエンザやらで忙しすぎてブログ、アプリ開発もサボってしまいましたが

１ヶ月ぶりに再開です！😆😆😆（これでもなんちゃって薬剤師なんですよ！）

本日から２週間に一度（隔週水曜日）アプリ開発の近況を皆様にご報告したいと思います！

記念すべき第１回はライブラリの更新をサボっていたが故に起きたトラブルをまとめてくらってしまい

四苦八苦しているところを語っていきたいと思います。

”てがきdeよせがき”とは？

完全無料！オンラインで手書きの寄せ書きを作成できるスマホアプリ

iOS、Android共に公開中！

※外部の姉妹サイトにリンクしています

成果報告

１．ライブラリのアップデート

今回アップデートしたライブラリは以下の通りです！

いや、わかっているよ…

これを観てくれている人がどんな気持ちなっているか…

お察しの通りです！アプリは動かなくなりました(泣)

でもね、アップデート前は"expo"ライブラリが"45.0.0"で開発サーバーを立ててもスマホのEXPOアプリで起動出来なくなってしまったので最新版の"48.0.0"にアップデートしたら、今度は"firebase"が古すぎて"expo SDK46からAsyncStorageがなくなっているから動かないよ"みたいなエラーが出ちゃったんですよ。

そのため満を持してライブラリの総取っ替えを行ったわけであります。

  "dependencies": {
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-native-community/netinfo": "9.3.7",
    "@react-native-community/slider": "4.4.2",
    "expo": "~48.0.0",
    "expo-camera": "~13.2.1",
    "expo-clipboard": "~4.1.2",
    "expo-image-manipulator": "~11.1.1",
    "expo-image-picker": "~14.1.1",
    "expo-media-library": "~15.2.2",
    "expo-status-bar": "~1.4.4",
    "expo-tracking-transparency": "~3.0.3",
    "expo-updates": "~0.16.3",
    "expo-web-browser": "~12.1.1",
    "firebase": "^9.17.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.3",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-svg": "13.4.0",
    "react-native-view-shot": "3.5.0",
    "react-native-web": "~0.18.10",
  },

２．ライブラリアップデートに伴い多数のエラーが勃発(泣)😭😭😭

とりあえず現れたエラーは以下の通り。

firebase ver.8 → firebase ver.9に変わったことによるエラー

TypeError: Cannot read property '__expo_module_name__' of undefined, js engine: hermes

"expo-image-picker"推奨keyの変更によるwarning

３．firebase ver.8 → firebase ver.9に対応

これは起こるべくして起きている。

そもそも"てがきdeよせがき"を作り始めた2022年5月時点でfirebase ver.9は存在していたのですが、

あまりにもサンプル例が不足していてfirebase ver.8から知識をアップデート出来なかったんでfirebase ver.8で作り初めてしまったんですよ。

なんとか今までやりくりしていたのですが、ずっと不穏なwarningがでていました。

Warning: Async Storage has been extracted from react-native core
and will be removed in a future release. It can now be installed
and imported from '@react-native-community/async-storage'
instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage

要約すると今後、標準では"async-storage"が使えなくなるから新しいライブラリをインポートして使ってねってことなんですが、firebase ver.8はどこかで"async-storage"を使用しているらしくwarningがずっとでてました。

それで"expo","react-native"のライブラリをアップデートしたところ標準の"async-storage"がなくなり、"firebase"のアップデートを余儀なくされたのです。

firebase ver.9にはfirebase ver.8から移行する際の応急処置が用意されています。

それはインポートする際に/compat/を追加するとこでfirebase ver.9でありながら、firebase ver.8と同様のコードで動かすことができるようになります。

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/storage";

上記のfirebase ver.8 から下記のように/compat/を挟んでインポートします。

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
import "firebase/compat/auth";
import "firebase/compat/storage";

ただしこれは一時しのぎでしかありません。

firebaseのリファレンスでも一時的な処置であると記載されています。

注: 互換ライブラリは一時的なソリューションであり、今後の SDK メジャーバージョン（バージョン 10 やバージョン 11 など）で完全に削除される予定です。最終的には、互換コードを削除し、アプリ内にバージョン 9 のモジュラースタイルのコードのみが含まれることを目標としてください。
https://firebase.google.com/docs/web/modular-upgrade?hl=ja

でもさ、firebase ver.9のリファレンス難しくないですか？

サンプルコードとか一切乗ってないし、日本語で要約された記事も見つけられないし、ChatGPTで調べたコードでは動かなかったし…

誰か私にfirebase ver.9を教えて下さい…

４．Expo admob を一時的にコメントアウト

TypeError: Cannot read property '__expo_module_name__' of undefined, js engine: hermes

このエラーは正直どうやって解決すればよいか不明なんですが、とりあえず原因は"expo-ads-admob"ライブラリにあることがわかりました。

すでにサポートされていないパッケージを使用している可能性があります。私にとっては expo-ads-admob でした。 admob の人気を考えると、同じものを使用している可能性があります。
https://stackoverflow.com/questions/75652689/typeerror-cannot-read-property-expo-module-name-of-undefined-js-engine

EXPOのリファレンスを見てみるとSDK46以降"expo-ads-admob"がなくなってるんですよね…

おそらく何処かに代替案があるとは思うのですが探すのめんどいなぁ…

まあ、今回はアプリが動くようにすることが目的なので、問題となっているAdmob関連のコードはコメントアウトで対処しました。

５．expo-image-pickerのwarningに対処

①

Key "cancelled" in the image picker result is deprecated and will be removed in SDK 48, use "canceled" instead

②

Key "uri" in the image picker result is deprecated and will be removed in SDK 48, you can access selected assets through the "assets" array instead

この①②のwarningはアルバムから写真を選択するときに利用していた、"expo-image-picker"によるものでした。

以下が修正前のコードなんですが

①では"result.cancelled"　→　"result.canceled"（lを一個取る）に変更しろよって言われています。多分スペルを間違えてしまったのでしょうね…😅

②では"uri"は"assets"配列の中に移動したからそっちから参照するように言われています。

const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });

    if (!result.cancelled) { //<--ココ①
      const manipImage = await ImageManipulator.manipulateAsync(
        result.uri,　//<--ココ②
        [{ resize: { width: 200, height: 200 } }],
        { compress: 1, format: ImageManipulator.SaveFormat.JPEG }
      );
      dispatch(setProjectImageUri({ value: manipImage.uri }));
    }
  };

以下が問題のresult例です。"canceled" ,"cancelled"2つのkeyが存在しますが"cancelled"は今後消滅していくでしょう

{"assets": [{"assetId": "ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED/L0/001", "base64": null, "duration": null, "exif": null, "fileName": "IMG_0005.JPG", "fileSize": 3423356, "height": 2002, "type": "image", "uri": "file:///Users/.........../ImagePicker/A2683480-F54B-4863-ACF8-8AAE02375729.jpg", "width": 3000}], "canceled": false, "cancelled": false}

よってコードを以下のように修正しました。

const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });

    if (!result.canceled) {
      const manipImage = await ImageManipulator.manipulateAsync(
        result.assets[0].uri,
        [{ resize: { width: 200, height: 200 } }],
        { compress: 1, format: ImageManipulator.SaveFormat.JPEG }
      );
      dispatch(setProjectImageUri({ value: manipImage.uri }));
    }
  };