parcel: Destructuring doesn't work with process.env

🐛 bug report

Destructuring doesn’t work with process.env.

🎛 Configuration (.babelrc, package.json, cli command)

{
    "presets": ["@babel/preset-env"]
}

🤔 Expected Behavior

const {PWD, NODE_ENV} = process.env;
console.log(PWD, NODE_ENV);

The console should print the variables, something like /home/user/parcel development.

😯 Current Behavior

The console prints undefined undefined.

💁 Possible Solution

🔦 Context

I am trying to follow ESLint’s no-process-env rule. I want to have only one place (one line) in my codebase where I read variables from process.env, so I have a config.js file with the following code:

//eslint-disable-next-line no-process-env
const {API_URL, NODE_ENV} = process.env;

export {
    API_URL,
    NODE_ENV
};

💻 Code Sample

const {PWD, NODE_ENV} = process.env;
console.log(PWD, NODE_ENV);

🌍 Your Environment

Software	Version(s)
Parcel	v1.10.3
Node	v11.0.0
npm/Yarn	npm 6.4.1
Operating System	Ubuntu 18.04

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 7
Comments: 16 (3 by maintainers)

Most upvoted comments

Currently, this

const {PWD, NODE_ENV} = process.env;

const {FILE} = process.env;

is processed by babel into:

var _process$env = process.env,
    PWD = _process$env.PWD,
    NODE_ENV = _process$env.NODE_ENV;
var FILE = process.env.FILE;

But Parcel’s env visitor (https://github.com/parcel-bundler/parcel/blob/master/packages/core/parcel-bundler/src/visitors/env.js) only looks out for process.env and looks up the key that follows: https://github.com/parcel-bundler/parcel/blob/6566e160affa161daa6d5486139e6059f685ba3a/packages/core/parcel-bundler/src/visitors/env.js#L6

Lookup hack:

--- a/packages/core/parcel-bundler/src/visitors/env.js
+++ b/packages/core/parcel-bundler/src/visitors/env.js
@@ -3,7 +3,8 @@ const types = require('@babel/types');
 module.exports = {
   MemberExpression(node, asset) {
     // Inline environment variables accessed on process.env
-    if (types.matchesPattern(node.object, 'process.env')) {
+    if (types.matchesPattern(node.object, 'process.env') || node.object.name == "_process$env") {
       let key = types.toComputedKey(node);
       if (types.isStringLiteral(key)) {
         let prop = process.env[key.value];

Remaining issue: removing the _process$env variable and also determining the name of _process$env at runtime (it could be different in some cases).

var _process$env = process.env,
    PWD = ".....",
    NODE_ENV = "....";
var FILE = "....";

mischnic on Jul 11, 2019

@mytee306 It does indeed, but only if you extract exactly one property. Strange.

EvgenyOrekhov on Jan 10, 2019

@xiaoxiangmoe “Don’t use it” is not a solution. The bug should be fixed.

EvgenyOrekhov on Oct 27, 2018

Not sure how relevant/useful what I’m about to say is, but this happens when using Babel by itself too.

edit: as it turns out, the issue in my case may have been related to using an older NodeJS version (I was running multiple projects simultaneously, one of them a legacy app that required node <=8.)

Just to discard the issue in your case is not the same as mine, I’d check having the latest updates.

justincorrigible on May 9, 2021

Having the same problem here. Had get them one by one…

TakanashiOuken on Nov 15, 2019

Cross referencing the same bug report for webpack: https://github.com/webpack/webpack/issues/5392.

EvgenyOrekhov on Oct 27, 2018