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

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?

Sep 12 '17 19:09 VilleMiekkoja

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

Sep 13 '17 07:09 nkalichynskyi

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

Sep 13 '17 09:09 vigneshshanmugam

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

Oct 25 '17 22:10 boopathi

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.

Nov 08 '17 06:11 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

Nov 08 '17 07:11 lsps9150414

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.

Dec 06 '17 15:12 neiker

Sometimes it can work, but sometimes it can't

Jan 02 '18 03:01 zhangqiangoffice

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

Jan 23 '18 15:01 htchaan

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

Feb 14 '18 12:02 SrdjanCosicPrica

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.

Mar 02 '18 09:03 riwu

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

Mar 22 '18 01:03 izikandrw

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

Apr 11 '18 12:04 kiorq

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.

Jul 11 '18 04:07 skyl

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.

Aug 08 '18 09:08 reyraa

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

Sep 21 '18 14:09 maikokuppe

still not working. somebody help

Dec 27 '18 08:12 geminiyellow

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...?

Jan 18 '19 09:01 bonham000

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

Feb 01 '19 03:02 aaaguirrep

Any status about the issue?

Apr 10 '19 02:04 aaaguirrep

still not working. somebody help

Apr 26 '19 20:04 JuanSeBestia

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

May 22 '19 19:05 Watersdr

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).

Aug 06 '19 08:08 crucialfelix

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.

Install package
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.

Aug 19 '19 11:08 GrzegorzStanczyk

@GrzegorzStanczyk This solution worked for me 🎉

Aug 20 '19 15:08 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

Aug 20 '19 16:08 YajJackson

Apparently the only way this works is clearing the cache.

Aug 29 '19 18:08 JaEdmuva

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

Oct 17 '19 15:10 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

Oct 18 '19 01:10 ntk0104

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

Oct 18 '19 04:10 ntk0104

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

Oct 28 '19 21:10 j8jacobs

minify minify copied to clipboard

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

minify
minify copied to clipboard