CODEWITHSUNDEEP
react-nativeexpo
juanjo12x
juanjo12x

Reputation: 321

Environment variable not being set in Axios configuration on Expo React Native project

I am trying to use a .env file inside my Expo project root directory with an API URL for Axios requests in a file called axios.ts.

import axios from 'axios';

const Axios = axios.create({
  baseURL: process.env.REACT_APP_API_URL
});

Axios.defaults.headers.common['Content-Type'] = 'application/json';

export default Axios;

In order to make it work, I installed the dot-env library as suggested by the official Expo documentation

Here is my package.json

  {
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "start-expo": "expo start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/picker": "1.6.0",
    "@react-navigation/drawer": "^5.9.0",
    "@react-navigation/material-top-tabs": "^5.2.13",
    "@react-navigation/native": "^5.7.0",
    "@react-navigation/native-stack": "^5.0.5",
    "@react-navigation/stack": "^5.9.0",
    "axios": "^0.20.0",
    "dotenv": "^8.2.0",
    "events": "^3.1.0",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "~0.62.2",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-paper": "^3.10.1",
    "react-native-reanimated": "~1.9.0",
    "react-native-screens": "~2.9.0",
    "react-native-tab-view": "^2.14.4",
    "react-native-table-component": "^1.2.1",
    "react-native-unimodules": "~0.10.0",
    "react-native-vector-icons": "^7.0.0",
    "react-native-web": "~0.11.7",
    "react-native-webview": "9.4.0",
    "react-redux": "^7.2.0",
    "redux-saga": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.23",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.61.23",
    "@types/react-native-vector-icons": "^6.4.5",
    "babel-plugin-inline-dotenv": "^1.6.0",
    "babel-preset-expo": "~8.2.0",
    "expo": "~38.0.1",
    "expo-updates": "~0.2.8",
    "jest-expo": "~38.0.0",
    "typescript": "~4.0.2"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

Of course, I also set the babel.config.js file

module.exports = function(api) {
  api.cache(true);
  return {
    plugins: ['inline-dotenv'],
    presets: ['babel-preset-expo'],
  };
};

The problem occurs when I am making an API call to some endpoint.

import Axios from "../../api/axios";
const login = async () => {
  console.log(process.env.REACT_APP_API_URL);
  try{
   const response = await Axios.post(ENDPOINTS.login,{
        email,
        password,
        device_id
      });
      console.log(response);
    }catch(e){ //TODO : deal with errors
      console.log(e);
    }
 };

The request is getting a 404 error when using the .env file and working normally if I just set the string directly.

import axios from 'axios';

const Axios = axios.create({
  baseURL: 'http://myurl..." // This is working as expected!
});

Axios.defaults.headers.common['Content-Type'] = 'application/json';

export default Axios;

It seems that the .env file is not being set correctly but according to the console.log(), it has the correct value. I suspect the reason is that the environment variable is set after the Axios function is called, so at first it's null but then when the log appears it is already set.

Is my explanation plausible or what other setting might be causing this problem?

Upvotes: 0

Views: 2384

Answers (1)

juanjo12x
juanjo12x

Reputation: 321

After testing it out the next day, I was surprised that it was working fine so I am assuming there was some problem with the cache. For anyone facing this problem, I suggest deleting the cache in Expo and try again

Upvotes: 1

Related Questions