EnvironmentPlugin: destructuring process.env doesn't work

[EvgenyOrekhov]

Do you want to request a feature or report a bug?
report a bug

What is the current behavior?
Destructuring process.env doesn't work.
console.log(MY_VAR); logs undefined

Steps to reproduce.

webpack.config.js

const path = require("path");
const {EnvironmentPlugin} = require("webpack");

module.exports = {
    entry: "./main.js",
    output: {
        path: path.resolve(__dirname),
        filename: "bundle.js"
    },
    plugins: [
        new EnvironmentPlugin(["MY_VAR"])
    ]
};

main.js

const {MY_VAR} = process.env;
console.log(MY_VAR); // logs undefined
console.log(process.env.MY_VAR); // logs "test"

command

MY_VAR=test webpack

What is the expected behavior?
console.log(MY_VAR); should log "test"

Node.js version: 8.2.1
webpack version: 3.4.1
OS version: Ubuntu 17.04

[ismail-syed]

@EvgenyOrekhov
With

new EnvironmentPlugin(["API_BASE_URL"])

Running node bundle.js I'm getting

undefined
undefined

With

new EnvironmentPlugin(["MY_VAR"])

I get the documented output of

undefined
test

Should the webpack.config.js have new EnvironmentPlugin(["MY_VAR"])

[EvgenyOrekhov]

@ismail-syed Yes, sorry, copy-paste error.

[VojtechStep]

That's because under the hood, EnvironmentPlugin uses DefinePlugin to perform text replacement, which means that it only swaps the text process.env.MY_VAR for whatever the value is. It isn't smart enough to figure out you're actually using the variable.

[sylver]

Any news here since summer 2017 ?

Just bumped into the problem and it's kind of (very) annoying when you have dozens of env variables (literally).

Will try to work on a PR if nobody's on it.

[jt3k]

I'm still waiting

[busticated]

i have a similar issue i think?

i have code like:

if (process && process.env && process.env[key]){
    json = process.env[key];
}

i currently use the webpack.DefinePlugin as such:

new webpack.DefinePlugin({
    'process.env': {
        MY_CONFIGS: JSON.stringify(process.env.MY_CONFIGS)
    }
})

which ends up replacing every instance of process.env with:

Object({ MY_CONFIGS: '{"stuff": "things"}' })

where '{"stuff": "things"}' ends up being a more significant json string.

is there a way to simply set a key on process.env without replacing every usage with the value?

[lutzk]

@busticated

new webpack.DefinePlugin({
    'process.env.MY_CONFIGS': JSON.stringify(process.env.MY_CONFIGS)
})

[busticated]

@lutzk - that's what i thought as well but since i'm doing a dynamic lookup - process.env[key] - webpack never actually sees the process.env.MY_CONFIGS token and thus cannot replace it.

[lutzk]

ah ok that might be
but in your example you replace the whole process.env obj:

youre telling the plugin to set 'process.env' = { MY_CONFIGS: JSON.stringify(process.env.MY_CONFIGS) }

thats why process.env is then Object({ MY_CONFIGS: '{"stuff": "things"}' })

[busticated]

@lutzk - yep, that's why i was asking:

is there a way to simply set a key on process.env without replacing every usage with the value?

[george-norris-salesforce]

Had this working with envify / Gulp. Moving to Webpack breaks all that..

[ilan-schemoul]

I know the people asking for what's up or say +1 are annoying but this is "P2: Very Important" issue yet there is no update for 2 years now so @sokra or the rest of the maintainers what do you think about this issue. Maybe fix it in the V5 ?
Why not replacing process.env by an object instead of replacing process.env.NAMEOFTHEVARIABLE ?

[vankop]

Automatic Node.js Polyfills removed in webpack@5, see https://github.com/webpack/changelog-v5#automatic-nodejs-polyfills-removed

@sokra @evilebottnawi this can be closed

[xeptore]

@vankop Hi! what if someone still wants to use webpack<5? i know it's something related to compilers/transpilers (e.g. babel), but any ideas on how to solve this?

[alexander-akait]

@xeptore can you provide reproducible test repo with example of the problem?

[xeptore]

@evilebottnawi of course, here is the link to it:
https://gitlab.com/the-xeptore/sandbox/webpack-env-destruction
sorry for late response.

[alexander-akait]

@xeptore To be honestly it is the bug and feature, EnvironmentPlugin (and EnvironmentPlugin) just find something.other.value and replace it on provided value, so destructuring is not working, but I think we can improve it

[xeptore]

@evilebottnawi yes. it's replacing based on tokens, and destructing is not exactly what it should replace. i play around with parsed version of both examples in this gist and it doesn't seem to be much difference between those trees. maybe one step further :)

[KaKi87]

Hello,
Why not just declaring the process variable ?
Since it doesn't exist in browser, it will not create any conflict.
Thanks

[vankop]

closing in favor of #14800

pls track problem there