Read keys from ENV will increase bundle size

[behnammodi]

Bug report

If we destructure more than one key from process.env, all keys will append to bundle file.

# .env file
REACT_APP_NAME=BEHNAM
REACT_APP_SURNAME=MOHAMMADI

// app
const { REACT_APP_NAME, REACT_APP_SURNAME } = process.env;

What is the current behavior?

// bundle file
var e=Object({NODE_ENV:"production",PUBLIC_URL:"",WDS_SOCKET_HOST:void 0,WDS_SOCKET_PATH:void 0,WDS_SOCKET_PORT:void 0,FAST_REFRESH:!0,REACT_APP_NAME:"BEHNAM",REACT_APP_SURNAME:"MOHAMMADI"}),t=e.REACT_APP_NAME,n=e.REACT_APP_SURNAME;

If the current behavior is a bug, please provide the steps to reproduce.

Just destructure more than 1 key from process.env

const { REACT_APP_NAME, REACT_APP_SURNAME } = process.env;

What is the expected behavior?

// bundle file
var t='BEHNAM',n='MOHAMMADI';

Other relevant information:
webpack version: 4.41.2
Node.js version: 14.16.1
Operating System: macOS
Additional tools: Create React App

[alexander-akait]

Avoid using process.env and destructuring, it is limitation, please use process.env.REACT_APP_NAME and process.env.REACT_APP_SURNAME directly, even more process.env is not safe to use, you can have sensitive data there, not all things can be tree shaking and you can leak your local env.

[behnammodi]

@alexander-akait Thanks, why does this code work?

const { REACT_APP_NAME } = process.env;
const { REACT_APP_SURNAME } = process.env;

[vankop]

@behnammodi because you using babel, take a look https://babeljs.io/repl/#?browsers=ie%2011&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=PTAEHcHsCcGsGcIFMA2KBQBjSA7eAXUAb1ACUBRAQQGEAVAfUoAUn6A5SgWXNAF9QAvKAAO0SJiTx4AOiQ4AbgG4suAsTJU6jFvQDKAVVIdufQSLESpshcvQhQAV3hJQAQzTnxkmXPkq8hCQUNAzMrMbkAIwANBoh2qwGRlxRpkKiXla-ikA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.8&externalPlugins=&assumptions=%7B%7D

pls use @alexander-akait suggestion

[alexander-akait]

@vankop I think we have this issue, I can't find...

[vankop]

Yes, we had one. I have added this issue to webpack 5 project board https://github.com/webpack/webpack/projects/5#card-43856731

[behnammodi]

@alexander-akait @vankop Thanks a lot, so have you any plan to handle destructure?

[alexander-akait]

It is not easy, but maybe yes

[behnammodi]

It is not easy, but maybe yes

And also I think this issue is for babel not webpack, am I right?

[vankop]

No, this is webpack issue.

[vankop]

closing in favor of #14800

[BradPrit09]

Avoid using process.env and destructuring, it is limitation, please use process.env.REACT_APP_NAME and process.env.REACT_APP_SURNAME directly, even more process.env is not safe to use, you can have sensitive data there, not all things can be tree shaking and you can leak your local env.

Hi Alex, Thank you for your effort. But I have doubt regarding the documentation of the web-pack 5. Specially EnvironmentPlugin and DefinePlugin. There it's mentioned we can use process.env clearly.
Additionally, I can access process.env in my configs, whereas in the migration it's written that webpack5 removed process pollyfills. Can you please elaborate on this ?

**VERSION USING**
"webpack": "^5.73.0",

[alexander-akait]

@BradPrit09 in documentation we use directly process.env.ENV_NAME (maybe we should improve docs to avoid misleading here, so feel free to do it).

You can use process.env inside webpack.config.js safely