Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Read keys from ENV will increase bundle size

See original GitHub issue

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

Issue Analytics

State:
Created 2 years ago
Comments:12 (8 by maintainers)

Top GitHub Comments

1reaction

alexander-akaitcommented, Sep 25, 2022

@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

1reaction

vankopcommented, Oct 11, 2021

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

Top Results From Across the Web

JavaScript performance beyond bundle size - Nolan Lawson

But I believe we focus on bundle size first and foremost because it's easy to measure. That's not to say that bundle size...

Two Quick Ways To Reduce React App's Size In Production

File size Development v/s Production. 2. Serve gzipped file in production. You can dramatically reduce the size by gzipping the bundle.js.

Reading in environment variables from an environment file

Current environment variables with the same keys as in the env file can either be left untouched or overwritten with the override parameter....

Understanding React Native env variables - LogRocket Blog

Variables can play different roles in React Native. For example, you can use CSS variables in React Native to store and implement custom...

Environment variables - AWS Amplify Hosting

Environment variables are key-value pairs that are available at build time. These configurations can ... Add the environment variable to your build command....