webpack: EnvironmentPlugin: destructuring process.env doesn't work

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 43
Comments: 20 (4 by maintainers)

Commits related to this issue

Fixes #5392. EnvironmentPlugin now extends process.env — committed to misterdev/webpack by misterdev 5 years ago
Fixes #5392 - Allow destructuring using EnvironmentPlugin — committed to THernandez03/webpack by deleted user 5 years ago
Fixes #5392 - Allow destructuring using EnvironmentPlugin — committed to THernandez03/webpack by deleted user 5 years ago
Fix undefined env variables errors in sitemap.xml and robots.txt > Trying to destructure process.env variables won't work due to > the nature of webpack DefinePlugin. > https://nextjs.org/docs/api-re... — committed to skoleapp/skole-frontend by ruohola 4 years ago
Fix undefined env variables errors in sitemap.xml and robots.txt > Trying to destructure process.env variables won't work due to > the nature of webpack DefinePlugin. > Source: https://nextjs.org/doc... — committed to skoleapp/skole-frontend by ruohola 4 years ago
Fix undefined env variables errors in sitemap.xml and robots.txt > Trying to destructure process.env variables won't work due to > the nature of webpack DefinePlugin. > > Source: https://nextjs.org/d... — committed to skoleapp/skole-frontend by ruohola 4 years ago
Fix undefined env variables errors in sitemap.xml and robots.txt > Trying to destructure process.env variables won't work due to > the nature of webpack DefinePlugin. > > Source: https://nextjs.org/d... — committed to skoleapp/skole-frontend by ruohola 4 years ago

Most upvoted comments

I’m still waiting

+23

jt3k on May 11, 2018

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.

sylver on Apr 6, 2018

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.

VojtechStep on Aug 11, 2017

@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 😃

xeptore on Aug 18, 2020

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

vankop on Mar 29, 2020

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 ?

ilan-schemoul on Nov 13, 2019