Cannot configure expo app properly `Failed to read config at: /app.config.js`

user_8980988 0
Viewed 4844

I am trying to develop an application and I am having trouble getting it to build once I added dotenv.

In my app.config.js I have

import "dotenv/config";
const API_URL = process.env["API_URL"] || "";
const API_VERSION = process.env["API_VERSION"] || "";
const MIRAGE_ENABLED = process.env["MIRAGE_ENABLED"] === "true" ? true : false;
const NODE_ENV = process.env["NODE_ENV"];

export default {
  name: "My Application",
  version: "0.0.0",
  extra: {
    API_URL,
    API_VERSION,
    MIRAGE_ENABLED,
    NODE_ENV,
  },
};

in my app.json I have:

{
  "expo": {
    "name": "my-application",
    "slug": "my-application",
    "owner": "my-expo",
    "privacy": "unlisted",
    "version": "0.0.0",
    "orientation": "landscape",
    "icon": "./assets/images/icon.png",
    "sdkVersion": "37.0.0",
    "platforms": ["ios"],
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "io.company.my-application",
      "buildNumber": "0.0.0"
    }
  }
}

After reading the documentation I am more confused than before. The output of expo build is:

Failed to read config at: .../app.config.js
ConfigError: Failed to read config at: .../app.config.js
    at Object.getDynamicConfig (/Users/me/.npm-global/lib/node_modules/expo-cli/node_modules/@expo/config/src/getConfig.ts:37:9)
    at getConfig (/Users/me/.npm-global/lib/node_modules/expo-cli/node_modules/@expo/config/src/Config.ts:121:62)
    at validateAsync (/@expo/xdl@58.0.12/src/project/Doctor.ts:438:24)
    at Object.validateWithoutNetworkAsync (/@expo/xdl@58.0.12/src/project/Doctor.ts:419:10)
    at /Users/me/.npm-global/lib/node_modules/expo-cli/src/exp.ts:644:35
    at Command.<anonymous> (/Users/me/.npm-global/lib/node_modules/expo-cli/src/exp.ts:331:7

which is no help at all. Searching for Failed to read config at: .../app.config.js yielded no results whatsoever.

What am I doing wrong? What is the best practice for configuration using expo in this manner? Any help would be greatly appreciated.

expo react-native build android ios
2 Answers

To begin with, you need to override the app.json with your envirionment variables in app.config.js. To override the js object you can use separator operator, and to give "extra" variables you can use extra key. Let me give an example:

import 'dotenv/config'

export default ({config}) => {
  const appConfig = ({
    ...config,
    version: process.env.VERSION,
    //override anything you want
    extra: {
      API_URL: process.env.API_URL,
      //...
    }
  });
  return appConfig;
}

This will attach the process env variables to your manifest. If you have any read errors about app.config.js, it's possible that you didn't install the dotenv package. Let me know.

user_79879100

first, you'll need to install the module 'dotenv' using the command npm i dotenv

Then, in your app.config.js file, provide the configuration in the arguments to the exported function:

import 'dotenv/config'

export default ({config}) => {
  const appConfig = ({
    ...config,
    version: process.env.VERSION,
    //override anything you want
    extra: {
      API_URL: process.env.API_URL,
      //...
    }
  });
  return appConfig;
};
user_163259770
Related