Cannot build locally with setting Google Maps SDK API key to environment variable

[hellososhi]

Build/Submit details page URL

No response

Summary

I want to load envs/.env.local with dotenv and set the Google Maps API key in the environment variable to build, but when I launch the built app, I get an error that there is no API key. When the API key is written directly in the 'app.config.ts' file, the app launches without any errors.

Managed or bare?

Managed

Environment

npx expo-env-info

  expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 14.0
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.17.0 - ~/.volta/tools/image/node/18.17.0/bin/node
      Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
      npm: 9.6.7 - ~/.volta/tools/image/node/18.17.0/bin/npm
      Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.12.1 - /Users/tsuna/.anyenv/envs/rbenv/shims/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
      Android SDK:
        API Levels: 30, 33
        Build Tools: 30.0.2, 30.0.3, 31.0.0, 33.0.0, 33.0.2
        System Images: android-33 | Google APIs ARM 64 v8a
    IDEs:
      Android Studio: 2022.2 AI-222.4459.24.2221.10121639
      Xcode: 14.2/14C18 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~49.0.6 => 49.0.16 
      react: 18.2.0 => 18.2.0 
      react-native: 0.72.6 => 0.72.6 
    Expo Workflow: managed

npx expo-doctor

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules do not use incompatible support packages
✔ Check for legacy global CLI installed locally
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

Error output

Reproducible demo or steps to reproduce from a blank project

• use MapView from react-native-maps and set provider props to PROVIDER_GOOGLE
• use this eas.json, app.json and app.config.ts
eas.json

{
  "cli": {
    "version": ">= 3.13.3"
  },
  "build": {
    "production": {
      "node": "18.17.0",
      "yarn": "1.22.19",
      "env": {
        "EXPO_PUBLIC_APP_MODE": "production"
      }
    },
    "preview": {
      "extends": "production",
      "distribution": "internal",
      "env": {
        "EXPO_PUBLIC_APP_MODE": "preview"
      }
    },
    "development": {
      "extends": "preview",
      "developmentClient": true,
      "env": {
        "EXPO_PUBLIC_APP_MODE": "development"
      }
    }
  },
  "submit": {
    "production": {}
  }
}

app.json

{
  "expo": {
    "name": "<app_name_here>",
    "slug": "<slig_here.",
    "version": "1.0.0",
    "orientation": "portrait",
    "userInterfaceStyle": "light",
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "<project_id_here>"
      }
    },
    "owner": "<owner_name_here>"
  }
}

app.config.ts

import * as dotenv from "dotenv";

if (process.env.EAS_BUILD !== "true") {
  dotenv.config({ path: __dirname + "/envs/.env.local" });
}

import { ExpoConfig, ConfigContext } from "expo/config";

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: "<app_name_here>",
  slug: "<slug_here>",
  icon: `./assets/images/appIcon/icon_${process.env.EXPO_PUBLIC_APP_MODE}.png`,
  ios: {
    config: {
      googleMapsApiKey: process.env.GOOGLE_MAPS_IOS_API_KEY,
    },
    bundleIdentifier: "<bundle_identifier_here>",
  },
  android: {
    adaptiveIcon: {
      foregroundImage: `./assets/images/appIcon/adaptive-icon_${process.env.EXPO_PUBLIC_APP_MODE}.png`,
    },
    config: {
      googleMaps: {
        apiKey: process.env.GOOGLE_MAPS_ANDROID_API_KEY,
      },
    },
    package: "<package_name_here>",
  },
});

• run this build command

eas build --local --platform android --profile preview --output ./build/android.apk

• install the app and open it, then the error occurs

[hellososhi]

The cause seems to be related to dotenv, since the app builds properly when the environment variable is set on the terminal.

[hellososhi]

Using dotenv was the problem. This command worked as I expected.

env-cmd -f envs/.env.local eas build --local --platform android --profile development

But why? Does interpreting the config run before dotenv loads the env file?

[szdziedzic]

I don't fully know your whole setup, but it seems like the .env.local env values weren't loaded at the time of performing the build. It seems like a project-specific issue. Good to hear it started to work!