process.env does not expose its keys as expected

I'm not sure if this is expected, but it doesn't feel right.

If I run an app with

$ REACT_APP_FOO=bar npm start

I can access process.env.REACT_APP_FOO, but REACT_APP_FOO in process.env returns false, and process.env["REACT_APP_FOO"] is undefined.

I'm trying to have something like:

function getConfig(key) {
   if (key in process.env) {
     return process.env[key];
   }

   return defaults[key];
}

If it's not there it will be undefined, your could write it like this.

function getConfig(key) {
   return process.env[key] || defaults[key];
}

I think this might be possible to fix if we use

new DefinePlugin({
  'process.env': {
    NODE_ENV: ...,
    OTHER_VAR: ...,
    // ...
  }
})

form instead of

new DefinePlugin({
  'process.env.NODE_ENV': ...,
  'process.env.OTHER_VAR': ...,
  // ...
})

like we do now.

Would you like to give it a try and maybe submit a PR?

The relevant code is in packages/react-scripts/config/env.js.
(It gets imported from webpack configs in packages/react-scripts/config.)

The contributing instructions are here.

@gaearon

Hey @gaearon I can do this.

Please check the PR above. I hope it is what you explained

Fixed in #807.

This is amazing to find already merged!

I've been working on a solution for the env vars issue on the Heroku buildpack. The ability to enumerate process.env entries will directly contribute to that solution 😄🍻

This is going to be included in 0.7.0, which will be out soon.

Navigation Menu

Repository navigation

process.env does not expose its keys as expected #795

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

process.env does not expose its keys as expected #795

Description

Activity

tbillington commented on Sep 29, 2016

gaearon commented on Sep 29, 2016

thien-do commented on Sep 30, 2016

thien-do commented on Sep 30, 2016

gaearon commented on Sep 30, 2016

mars commented on Oct 12, 2016

fson commented on Oct 12, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions