Error: "ios.bundleIdentifier" is not defined in your app.config.js and we can't update this file programmatically. Add the value - react-native

Question

I am trying to deploy a React Native App using eas build.
The app builds successfully on Android but not on IOS.
I see this error message which says ios.bundleIdentifier is not defined in app.config.js
But... it IS defined, as can be seen here:
import 'dotenv/config';
export default {
"name": "raterepositoryapp",
extra: {
env: process.env.ENV,
uri: process.env.APOLLO_URI
},
"expo": {
"extra": {
"eas": {
"projectId": "ecf6c94b-c096-4a5b-ab41-8dfdd36de96b"
}
}
},
"slug": "rate-repository-app",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.webforprofessionals.rate-repository-app",
"buildNumber": "1.0.0"
},
"android": {
"package": "com.webforprofessionals.raterepositoryapp",
"versionCode": 1,
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
Why is the error coming up ?

Answer 1

I was able to finally discover the answer by using the EAS CLI command eas config --platform=ios --profile=preview (or whatever profile you want to test against). When you look at the output it gives you for app.config.js, you'll notice that there is no ios section shown and it's much smaller than your full app.config.js object. It is only using the eas portion of your app config.
I was able to fix the error by copying the ios config that's at the top-level of app.config.js into the expo portion of your config. I also moved the definition into a variable so I could use it in both places without repeating myself.
Edit:
After some more testing and documentation reading, I discovered what the real issue was. It appears that if you use app.config.js, the object you return is interpreted as the expo config... unless you also have an expo key inside that object. Then it only looks at what's in the expo part of your config. So what you really want to do is take your everything that's embedded under expo.extra and move it under extra.
Afterwards your app.config.js should look something like this:
export default {
name: "raterepositoryapp",
extra: {
env: process.env.ENV,
uri: process.env.APOLLO_URI,
eas: {
projectId: "ecf6c94b-c096-4a5b-ab41-8dfdd36de96b"
}
},
slug: "rate-repository-app",
// etc...
}
This is not obvious at all based on the error output, but after you realize which part of the file it's using, it's easy to address. I hope this works for you, too.
The documentation that tipped me off to this can be found here. You'll notice that wherever it uses the app.json format, you'll see everything nested under an expo key, but wherever it uses the app.config.js format, you'll see everything at the top-level of the object. That gave me the hint to start testing moving everything to the top level and do some testing.