babel-plugin-transform-inline-environment-variables does not seem to work with react-native

[VilleMiekkoja]

As the title says, babel-plugin-transform-inline-environment-variables doesn't seem to work with react-native. I'm not sure if it is supposed to work? My react-native version is: 0.48.2

The process.env.somevar is undefined. Do I need to clear some babel cache or something to get this working?

[nkalichynskyi]

Same here, the only property in process.env is NODE_ENV and it can't be modified.
RN version - 0.45.1

[vigneshshanmugam]

Will have a look. Can give you the version number of the plugin?

[boopathi]

Can you provide more info - sample code, expected output, actual output, babel config ?

[lsps9150414]

Using "babel-plugin-transform-inline-environment-variables": "^0.2.0".
With "react-native": "0.41.2".

I have these npm scripts:

"build-dev": "REACT_NATIVE_ENVIRONMENT=DEV react-native run-ios --scheme 'boca-debug' --configuration 'Debug'",
"build-staging": "REACT_NATIVE_ENVIRONMENT=STAGING react-native run-ios --scheme 'boca-staging' --configuration 'Staging'",
"build-prod": "REACT_NATIVE_ENVIRONMENT=PROD react-native run-ios --scheme 'boca' --configuration 'Release'",

But both process.env['REACT_NATIVE_ENVIRONMENT'] and process.env.REACT_NATIVE_ENVIRONMENT are undefined.

Logging out process.env shows it only has NODE_ENV.

[lsps9150414]

process.env['REACT_NATIVE_ENVIRONMENT'] return correct value after rm -rf $TMPDIR/react-* && watchman watch-del-all && npm cache clean

but only works with react-native start, not react-native run-ios

[neiker]

Modify your package.json and add NODE_ENV definition to the start script

"start": "NODE_ENV='development' node node_modules/react-native/local-cli/cli.js start",

Also add NODE_ENV='test' to your test script (if you havent already) and NODE_ENV='production' to your release script.

[zhangqiangoffice]

Sometimes it can work, but sometimes it can't

[htchaan]

you may need to clear the cache
NODE_ENV='development' node node_modules/react-native/local-cli/cli.js start --reset-cache

[SrdjanCosicPrica]

I recently made this work and commented on another issue. Here is the link

[riwu]

I'm facing the same issue https://github.com/riwu/synergy-lab-time-estimation/blob/3a68af7e5cd1c5f4f19a9f389e634ec4a8305fea/client/src/actions/api.js#L4

It works for Android, and iOS built for Debug, but not iOS built for Release.
The SAMPLING_API_URL variable is set in my bash_profile.
Tried rm -rf $TMPDIR/react-* && watchman watch-del-all && yarn cache clean and adding --reset-cache, didn't help.

[izikandrw]

this happens to me too. react native .54 babel-plugin-transform-inline 0.3.0. Please fix! The environment variable just gets cached somewhere and won't change even if I change it

[kiorq]

Doesn't work. v0.4.0, using react-native-scripts

[skyl]

You can demonstrate the issue pretty easily here:

https://github.com/skyl/react-native-zcash/tree/babel-minify-687

Checkout that branch, and run:

yarn
cd applications/zcash-storybook
ZCASH_RPC_TEST_USERNAME='anything' yarn storybook
# in another terminal
ZCASH_RPC_TEST_USERNAME='anything' yarn start

Run the app on an emulator (for instance, hitting i in the yarn start terminal). You should get a console.error with the contents of process.env. But, the only key there is NODE_ENV, no ZCASH_RPC_TEST_USERNAME even though it's whitelisted.

[reyraa]

I've added this package to my dependencies and added to .babelrc plugins. I can log the value but there are two problems:

• just like @riwu said It caches the first value passed and it's pretty tricky to remove cache and pass a new value. Which makes this plugin kind of useless.
• although I can run foo=bar npm start and get the value using console.log(process.env.foo), but when I do console.log(process.env), foo does not exist in the object.

[maikokuppe]

Clearing the cache with react-native start --reset-cache did it for me.

[geminiyellow]

still not working. somebody help

[bonham000]

Any workarounds for this? It's causing code to run which causes an error because the NODE_ENV cannot be determined correctly (always undefined) during a build step...?

[aaaguirrep]

Any status about the issue? I have the same issue. My project is by nuxtjs.

[aaaguirrep]

Any status about the issue?

[JuanSeBestia]

still not working. somebody help

[Watersdr]

Still having this issue :/
RN: "0.57.1"
plugin: "^0.4.3"

[crucialfelix]

It does work, but as mentioned above: you probably have to clear the babel cache.

NODE_ENV='development' node node_modules/react-native/local-cli/cli.js start --reset-cache

then stop that, then start run-ios / run-android

Babel sees that the source code is the same, so it uses the cached version. It doesn't know that the env vars changed (which would result in a different compiled output).

[GrzegorzStanczyk]

I was in group in which things don't work out of the box. After struggling some time I can share how I make it works.

1. Install package
2. create/modify .babelrc file

"plugins": [
    [
      "transform-inline-environment-variables",
      {
        "include": ["NODE_ENV", "API_URL", "...your custome keys" ]
      }
    ]
  ]

Important to note. We have to define all variables in include array.
3. Type API_URL='some url' react-native start --reset-cache
4. Close console and type react-native run-ios/android or just reload simulator.
For me it works. The missing point was to include variables names in 'includes' array in .babelrc file.

[YajJackson]

@GrzegorzStanczyk This solution worked for me 🎉

[YajJackson]

It's also probably worth noting that process.env doesn't seem to support destructuring.

Didn't work for me🚫

const {
    API_URL,
    SOME_KEY
}  = process.env

Worked for me ✅

const API_URL = process.env.API_URL
const SOME_KEY = process.env.SOME_KEY

[JaEdmuva]

Apparently the only way this works is clearing the cache.

[ntk0104]

downgrade from version 4.x.x to 0.3.0 works with me.

[ntk0104]

stupid problem. I defined 2 script in package.json look like this

"start-app2": "REACT_NATIVE_A=X react-native start",
"start-a": "REACT_NATIVE_A=X react-native start"

, but only works. After figured out a whole day, i found that the issue is the space and the tab between REACT_NATIVE_A=X and react-native start. Tab works but space don't. Hope this help

[ntk0104]

be careful the space or tab between VARIABLE_NAME and react-native start. tab work but space don't

[j8jacobs]

Was logging process.env wondering why it wasn't popping up, but logging the value directly does.
Command I ran:

TEST=test react-native start --reset-cache

In my code, I logged the following:

console.log(process.env) // "{NODE_ENV: "development"}"
console.log(process.env.TEST) // "test"

A little frustrating that the log couldn't show what I was looking for but very cool when you get it going.

One last thing for anyone curious, This is the .babelrc file I made to make this work:

{
	"presets": ["module:metro-react-native-babel-preset"],
	"plugins": [
		"transform-inline-environment-variables"
	]
}

on React Native 0.57.8, React 16.6.3

shoutout to @reyraa for the idea to check

[0xc0d3r]

Solved the problem by following the documentation

https://github.com/babel/minify/tree/master/packages/babel-plugin-transform-inline-environment-variables#usage

My .babelrc file

{
  "plugins": [
    ["transform-inline-environment-variables", {
      "include": [
        "NODE_ENV",
        "CUSTOM_ENV_VAR1",
        "CUSTOM_ENV_VAR2"
      ]
    }]
  ]
}

[vmnog]

I was not able to use .env variables with Expo Bareflow + Babel Plugin setup.

The babel-plugin-transform-inline-environment-variables does not seem to work at all for me.

I could come up with a solution doing the following:

1. Rename your app.json to app.config.js
2. Install dotenv using command yarn add dotenv (or use npm instead)
3. Your app.config.js must have require('dotenv/config') and also the expo object.
4. Inside the expo object, create an extra object which will have your enviroment variables

Follow example below:

require('dotenv/config')

export default {
  name: 'your-app-name',
  displayName: 'your-app-name',
  version: '1.0.0',
  expo: {
    name: 'your-app-name',
    slug: 'your-app-name',
    version: '1.0.0',
    assetBundlePatterns: [
      '**/*',
    ],
    extra: {
      // Here you can declare your variables getting the value from .env file
      EXAMPLE: process.env.EXAMPLE,
    },
  },

}

4. Then you can use expo Constants to have access to .env, just like in the https://docs.expo.io/guides/environment-variables/#using-app-manifest--extra

5. After that changes you can run yarn start --reset-cache and yarn android or yarn ios

Extra thanks to @martins20 who worked with me on this solution.

[pmartinsdev]

I was not able to use .env variables with Expo Bareflow + Babel Plugin setup.

The babel-plugin-transform-inline-environment-variables does not seem to work at all for me.

I could come up with a solution doing the following:

1. Rename your app.json to app.config.js
2. Install dotenv using command yarn add dotenv (or use npm instead)
3. Your app.config.js must have require('dotenv/config') and also the expo object.
4. Inside the expo object, create an extra object which will have your enviroment variables

Follow example below:

require('dotenv/config')

export default {
  name: 'your-app-name',
  displayName: 'your-app-name',
  version: '1.0.0',
  expo: {
    name: 'your-app-name',
    slug: 'your-app-name',
    version: '1.0.0',
    assetBundlePatterns: [
      '**/*',
    ],
    extra: {
      // Here you can declare your variables getting the value from .env file
      EXAMPLE: process.env.EXAMPLE,
    },
  },

}

1. After that changes you can run yarn start --reset-cache and yarn android or yarn ios

Extra thanks to @martins20 who worked with me on this solution.

You're welcome bro

[ShivamJoker]

Okay so no one is caring to fix it thats bad