expo prebuild (ios only) fails with react-native-msal "Error: [ios.appDelegate]: ...not in objective-c"

Issue

I had a similar issue with Android where I had to change the build version in the node_modules of build.gradle to match the SDK version used by the expo. See the solution here: https://stackoverflow.com/a/77389132/2150879

Now I'm seeing a different type of error with ios during expo's prebuild command complaining about not finding objective-c code, I don't even know where to begin where to start looking at why this is happening...

The Command

npx expo prebuild --platform ios

Azure's Error Output

Installing using npm
> npm install
- Config syncing
Using node to generate images. This is much slower than using native packages.
› Optionally you can stop the process and try again after successfully running `npm install -g sharp-cli`.

- Config syncing
✖ Config sync failed
Error: [ios.appDelegate]: withIosAppDelegateBaseMod: Cannot modify AppDelegate because it is not in objective-c
Error: [ios.appDelegate]: withIosAppDelegateBaseMod: Cannot modify AppDelegate because it is not in objective-c
    at /Users/runner/work/1/s/node_modules/react-native-msal/plugin/build/withIosReactNativeMSAL.js:35:19
    at action (/Users/runner/work/1/s/node_modules/react-native-msal/node_modules/@expo/config-plugins/build/plugins/withMod.js:235:29)
    at interceptingMod (/Users/runner/work/1/s/node_modules/react-native-msal/node_modules/@expo/config-plugins/build/plugins/withMod.js:126:27)
    at action (/Users/runner/work/1/s/node_modules/@expo/config-plugins/build/plugins/withMod.js:206:14)
    at async interceptingMod (/Users/runner/work/1/s/node_modules/@expo/config-plugins/build/plugins/withMod.js:105:21)
    at async action (/Users/runner/work/1/s/node_modules/@expo/config-plugins/build/plugins/createBaseMod.js:61:21)
    at async interceptingMod (/Users/runner/work/1/s/node_modules/@expo/config-plugins/build/plugins/withMod.js:105:21)
    at async evalModsAsync (/Users/runner/work/1/s/node_modules/@expo/config-plugins/build/plugins/mod-compiler.js:202:25)
    at async Object.compileModsAsync (/Users/runner/work/1/s/node_modules/@expo/config-plugins/build/plugins/mod-compiler.js:124:10)
    at async configureProjectAsync (/Users/runner/work/1/s/node_modules/@expo/cli/build/src/prebuild/configureProjectAsync.js:54:15)

Error traced to node_modules\react-native-msal\plugin\build\withIosReactNativeMSAL.js

const withAppDelegateConfig = (config) => {
    return (0, config_plugins_1.withAppDelegate)(config, (mod) => {
        if (mod.modResults.language === 'objc') {
            mod.modResults.contents = setAppDelegate(mod.modResults.contents);
        }
        else {
            throw new Error('Cannot modify AppDelegate because it is not in objective-c'); // <---- error comes from here
        }
        return mod;
    });
};

Expo Config app.json

{
  "expo": {
    "name": "my project",
    "slug": "my-project",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/qa-icon-1024.png",
    "userInterfaceStyle": "light",
    "backgroundColor": "#001689",
    "splash": {
      "image": "./assets/images/qa-splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#001689"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.example.mysite",
      "buildNumber": "1.0.0"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/qa-icon-1024.png",
        "backgroundColor": "#001689"
      },
      "package": "com.example.mysite",
      "versionCode": 1
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "my_uuid"
      }
    },
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "minSdkVersion": 23,
            "compileSdkVersion": 33,
            "targetSdkVersion": 33,
            "buildToolsVersion": "33.0.0"
          },
          "ios": {
            "deploymentTarget": "13.0"
          }
        }
      ],
      [
        "react-native-msal",
        {
          "androidPackageSignatureHash": "my_key"
        }
      ]
    ]
  }
}

Package.json to show package versions

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start --port 8082",
    "android": "expo run:android --port 8082",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "axios": "^1.6.2",
    "expo": "^49.0.21",
    "expo-build-properties": "^0.8.3",
    "expo-secure-store": "~12.3.1",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-system-ui": "^2.6.0",
    "formik": "^2.4.2",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-get-random-values": "~1.9.0",
    "react-native-msal": "^4.0.4",
    "react-native-reanimated": "^3.6.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "^3.27.0",
    "uuid": "^9.0.1",
    "yup": "^1.2.0",
    "zustand": "^4.4.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.22.9",
    "@types/node": "^20.4.2",
    "@types/react": "~18.2.14",
    "@types/uuid": "^9.0.7",
    "@typescript-eslint/eslint-plugin": "^6.1.0",
    "@typescript-eslint/parser": "^6.1.0",
    "babel-plugin-jest-hoist": "^29.5.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.45.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-header": "^3.1.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsdoc": "^46.4.4",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "typescript": "^5.1.3"
  },
  "private": true
}

Solution

I threw in a hack to console.log(mod.modResults.language) to see what the value actually was as to why this condition was false. It looks like the value was objcpp. It seemed so close to the objc value that all I did was change the line.

node_modules/react-native-msal/plugin/build/withIosReactNativeMSAL.js

change

if (mod.modResults.language === 'objc') {

to

if (mod.modResults.language === 'objcpp') {

Now it works. I can see the last code push for this line was 2 years ago, so maybe it wasn't updated and a bug needs to be filed. This is a duck-tape solution, but at least it works.

Answered By - Fiddle Freak