[EAS Build] - Expo SDK 47 + expo-image "No package name found"

[VictorioMolina]

Minimal reproducible example

Install Expo SDK 47.0.0 and expo-image 1.2.1. Then, run "yarn build-dev:ios" (EAS dev build).

Summary

7 days ago I compiled my app, which uses Expo SDK 47 and expo-image successfully... Today, with the exactly same code, the build fails on pods installation.

For me, it is a required to use expo-image and Expo SDK 47. I cannot upgrade to Expo SDK 48 because I use the non-modular version of Firebase JS SDK (prior to Firebase JS v9.0.0) which imports AsyncStorage from "react-native", and it has been deprecated in the new architecture...

If I do not remember bad, I have seen some repos using expo-image with Expo SDK 46 & 47. And my last week compilation (with SDK 47) doesn't crash when rendering an expo-image component.

After running EAS build, I get the following error:

Install pods

Using Expo modules

[Expo] Enabling modular headers for pod ExpoModulesCore

[Expo] Enabling modular headers for pod ReactCommon

[Expo] Enabling modular headers for pod SDWebImage

[Expo] Enabling modular headers for pod SDWebImageWebPCoder

[Expo] Enabling modular headers for pod SDWebImageAVIFCoder

[Expo] Enabling modular headers for pod SDWebImageSVGCoder

[Expo] Enabling modular headers for pod EXImageLoader

Auto-generating `.xcode.env.local` with $NODE_BINARY=/Users/expo/.nvm/versions/node/v16.18.1/bin/node

[stderr] 
error Failed to build the app: No package name found. Found errors in /Users/expo/workingdir/build/node_modules/expo-image/android/src/main/AndroidManifest.xml.

[!] Invalid `Podfile` file: unexpected token at 'info Run CLI with --verbose flag for more details.

'.
 #  from /Users/expo/workingdir/build/packages/app/ios/Podfile:17

 #  -------------------------------------------

 #  # @generated end react-native-maps

 >    config = use_native_modules!

 #  

 #  -------------------------------------------

Error: Unknown error. See logs for more information.

There is another person getting a similar issue.

Any ideas whats going on? This is my package.json:

{
  "private": true,
  "name": "...",
  "version": "1.7.0",
  "description": "...",
  "repository": "...",
  "main": "index.js",
  "license": "MIT",
  "author": {
    "name": "Victorio Molina",
    "email": "..."
  },
  "scripts": {
    "start": "npx expo start --dev-client",
    "android": "npx expo run:android",
    "ios": "npx expo run:ios",
    "doctor": "npx expo-doctor",
    "doctor:fix": "npx expo install --check",
    "build": "eas build --profile production --platform all",
    "build:ios": "eas build --profile production --platform ios",
    "build:android": "eas build --profile production --platform android",
    "build:list": "eas build:list",
    "build-preview": "eas build --profile preview --platform all",
    "build-preview:ios": "eas build --profile preview --platform ios",
    "build-preview:android": "eas build --profile preview --platform android",
    "build-dev": "eas build --profile development --platform all",
    "build-dev:ios": "eas build --profile development --platform ios",
    "build-dev:android": "eas build --profile development --platform android",
    "submit:ios": "eas submit --platform ios",
    "submit:android": "eas submit --platform android",
    "device:create": "eas device:create",
    "metadata:pull": "eas metadata:pull",
    "metadata:push": "eas metadata:push",
    "eas-secret:create": "eas secret:create",
    "eas-secret:list": "eas secret:list",
    "eas-secret:push-env-file": "eas secret:push --scope project --env-file ./.env",
    "eas-secret:delete": "eas secret:delete",
    "docs": "jsdoc -c jsdoc.js",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs",
    "lint:fix": "eslint --fix . --ext .js,.jsx,.cjs,.mjs"
  },
  "dependencies": {
    "@expo/config-plugins": "^5.0.2",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/datetimepicker": "6.5.2",
    "@react-native-masked-view/masked-view": "0.2.8",
    "@react-native-picker/picker": "2.4.8",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/core": "^6.4.8",
    "@react-navigation/elements": "^1.3.17",
    "@react-navigation/material-bottom-tabs": "^6.2.15",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",
    "@shopify/flash-list": "^1.4.3",
    "deprecated-react-native-prop-types": "^2.3.0",
    "dotenv": "^16.0.3",
    "expo": "^47.0.0",    <---------------------------- THIS
    "expo-av": "~13.0.2",
    "expo-blur": "~12.0.1",
    "expo-build-properties": "~0.4.1",
    "expo-camera": "~13.1.0",
    "expo-constants": "~14.0.2",
    "expo-dev-client": "~2.0.1",
    "expo-device": "~5.0.0",
    "expo-doctor": "^1.1.1",
    "expo-file-system": "~15.1.1",
    "expo-firebase-analytics": "~8.0.0",
    "expo-font": "~11.0.1",
    "expo-haptics": "~12.0.1",
    "expo-image": "^1.2.3",  <---------------------------- THIS
    "expo-image-manipulator": "~11.0.0",
    "expo-linear-gradient": "~12.0.1",
    "expo-location": "~15.0.1",
    "expo-media-library": "~15.0.0",
    "expo-notifications": "~0.17.0",
    "expo-screen-capture": "~5.0.0",
    "expo-splash-screen": "^0.17.5",
    "expo-system-ui": "~2.0.1",
    "expo-updates": "~0.15.6",
    "expo-web-browser": "~12.0.0",
    "firebase": "8.10.0",
    "i18n-js": "^3.8.0",
    "lodash": "^4.17.21",
    "lottie-react-native": "5.1.4",
    "moment": "^2.29.4",
    "prop-types": "^15.8.1",
    "react": "18.1.0",  <---------------------------- THIS
    "react-dom": "18.1.0",  <---------------------------- THIS
    "react-native": "0.70.8",  <---------------------------- THIS
    "react-native-chart-kit": "^6.12.0",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-google-mobile-ads": "^11.1.1",
    "react-native-indicators": "^0.17.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-maps": "1.3.2",
    "react-native-modal-datetime-picker": "^15.0.1",
    "react-native-pager-view": "6.0.1",
    "react-native-paper": "^5.8.0",
    "react-native-reanimated": "~2.12.0",
    "react-native-reanimated-carousel": "^3.3.2",
    "react-native-redash": "14.2.2",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-svg": "13.4.0",
    "react-native-tab-view": "^2.15.2",
    "react-native-web": "~0.18.7",
    "reanimated-bottom-sheet": "^1.0.0-alpha.22",
    "rgb2hex": "^0.2.5",
    "shorthash": "^0.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-typescript": "^7.18.6",
    "@crush/eslint-config-react-native": "*",
    "babel-plugin-inline-dotenv": "^1.7.0",
    "jsdoc": "^3.6.11",
    "jsdoc-tsimport-plugin": "^1.0.5"
  }
}

  "resolutions": {
    "expo-modules-autolinking": "~1.0.0",
    "@expo/config-plugins": "^5.0.2",
    "@expo/prebuild-config": "^5.0.5"
  }

Environment

expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 16.18.1 - /usr/local/bin/node
      Yarn: 1.22.19 - ~/.yarn/bin/yarn
      npm: 8.19.2 - /usr/local/bin/npm
      Watchman: 2022.10.17.00 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.11.3 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    IDEs:
      Android Studio: 2021.3 AI-213.7172.25.2113.9123335
      Xcode: 12.4/12D4e - /usr/bin/xcodebuild
    npmPackages:
      react-dom: 18.1.0 => 18.2.0 
      react-native-web: ~0.18.7 => 0.18.12 
    Expo Workflow: managed

I have tried with eas-cli@3.13.3, which was the same version I was using last week, and the latest version of eas-cli, 3.15.0.

[VictorioMolina]

Here is another repo from 4 months ago, using expo-image and SDK 47 https://github.com/GILJINHYUNG/reactnative_movie/blob/main/package.json.

And here there is another guy using expo-image on SDK 46 https://github.com/rickithadi/budding/blob/main/package.json

[VictorioMolina]

This is the eas.json of my Yarn monorepo:

{
  "cli": {
    "version": ">= 3.15.0",
    "appVersionSource": "local"
  },
  "build": {
    "production": {
      "node": "16.18.1",
      "yarn": "1.22.19",
      "distribution": "store",
      "ios": {
        "resourceClass": "m-medium"
      }
    },
    "preview": {
      "extends": "production",
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "development": {
      "extends": "production",
      "distribution": "internal",
      "developmentClient": true,
      "ios": {
        "resourceClass": "m-medium",
        "simulator": true
      }
    }
  },
  ...
}

victoriomolina@Victorio app % npm -g list    
/usr/local/lib
├── corepack@0.14.1
├── n@9.0.1
├── npm@8.19.2
└── yarn@1.22.19

victoriomolina@Victorio app % node -v
v16.18.1

[VictorioMolina]

It seems the problem is caused because of this commit 3a04781 (?)

[Kudo]

hi there! yes, expo-image@1.2.1 does not officially support expo sdk 47. the problem is that the old react-native-community cli autolinking does not support the new format without package in AndroidManifest.xml. if you really want to use the expo-image on sdk 47, please use patch-package and revert the changes from 3a04781

[iodriller]

Can you please elaborate on the solution? What specifically needs to be done to resolve this?

[VictorioMolina]

@iodriller @rc-markzhou I solved the issue upgrading to Expo SDK 48 and stop using Firebase JS SDK. Migrating to react-native-firebase, imo, has been the best decision of my week. But, you can also upgrade to Expo SDK 48, and use Firebase 10.0.0, which also offers the namespaced API in the “compat” folder.

[iodriller]

@VictorioMolina Thanks for this. Migrating to react-native-firebase means no more expo go. I heavily use expo go during development. I tried the namespaced API with compat, however some things such as auth, didn't work properly for me. Migrating to Firebase 10 will cost me days if not weeks..

@Kudo Is there any documentation on how to "use patch-package and revert the changes". How can we resolve this issue? (In my case it is not expo-image, but some other library that I couldn't pinpoint exactly..)

[VictorioMolina]

@iodriller I have been using Firebase JS SDK with Expo for more than 3 years now, and the main problems I have detected are related to DB and auth persistence. Upgrading to react-native-firebase is my recommendation, might be quite hard to integrate EAS if it is your first time, but you just have to configure a eas.json and .easignore file. The docs of EAS are really concise and clear, in my opinion, for managed workflows there are a lot of libraries right there that require development builds and could improve your app performance (@shopify/flash-list, for example).

In the other hand, if you want to continue using Expo Go, then consider upgrading to Firebase 10.0.0 before patching (it’s like doing extra work, you will end up upgrading in the future).

The only problem with Firebase 10.0.0, if you are using the namespaced API (compat), is that firebase auth still uses AsyncStorage from “react-native” and not from “react-native-community”. Just try opening an issue in the Firebase JS SDK repo, or use an hybrid API (modular for authentication, and compat for the rest).

At the end, it’s just changing your auth module and updating your imports, as it says in the Firebase documentation. Honestly, I tried it (but decided to migrate to react-native-firebase because don’t like combining modular with namespaced) and it barely took me one/two hours (although I thought, at first, that it would take days).