CODEWITHSUNDEEP
react-nativeenvironment-variablesexpodotenv
VDTe
VDTe

Reputation: 635

react native environment variables .env return undefined

I am currently using dotenv but there seems to be some caching issue with the @env. So wanted to try using process.env but it returns undefined. I am using expo, dotenv and webpack. On app.js process.env.REACT_APP_KEY returns undefined, already restarted server, terminal and even my PC.

.env

REACT_APP_KEY=aaddddawrfffvvvvssaa
REACT_APP_KEY = aaddddawrfffvvvvssa

Webpack config

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
const path = require('path')

config.module.rules = config.module.rules.map(rule => {
    if (rule.oneOf) {
        let hasModified = false;

        const newRule = {
            ...rule,
            oneOf: rule.oneOf.map(oneOfRule => {
                if (oneOfRule.use && oneOfRule.use.loader && oneOfRule.use.loader.includes('babel-loader')) {
                    oneOfRule.include = [
                        path.resolve('.'),
                        path.resolve('node_modules/@ui-kitten/components'),
                    ]
                }
                if (oneOfRule.test && oneOfRule.test.toString().includes('svg')) {
                    hasModified = true;
                    const test = oneOfRule.test.toString().replace('|svg', '');
                    return {...oneOfRule, test: new RegExp(test)};
                } else {
                    return oneOfRule;
                }
            })
        };

        // Add new rule to use svgr
        // Place at the beginning so that the default loader doesn't catch it
        if (hasModified) {
            newRule.oneOf.unshift({
                test: /\.svg$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: '@svgr/webpack',
                    }
                ]
            });
        }

        return newRule;
    } else {
        return rule;
    }
});

return config;
};

babel config

    module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
      ['module:react-native-dotenv', {
        'moduleName': '@env',
        'path': '.env',
        "blocklist": null,
        "allowlist": null,
        "safe": true,
        "allowUndefined": false,
      }]
    ],
  };
};

If it matters (for dotenv)

declare module '@env' {
  export const API_ENDPOINT: string;
}

Also tried process.env.NODE_ENV (which is working and prints "development" as output). Only process.env.VARIABLE_NAME is undefined

Upvotes: 1

Views: 2323

Answers (1)

Kemal Ahmed
Kemal Ahmed

Reputation: 703

Maintainer here! process.env support in react-native-dotenv was just added this month https://github.com/goatandsheep/react-native-dotenv/issues/187

Upvotes: 1

Related Questions