String comparison not working in Javascript when comparing an environment variable with a constant

Question

We have a simple React application, created with CRA 1.x.

We installed dotenv to use environment variables on the project and our variables are included on the .env and .env.development files like this:

.env

REACT_APP_LOGGER=LOGGER

.env.development

REACT_APP_LOGGER=NO_LOGGER

Then in the code we have this logic:

if(process.env.REACT_APP_LOGGER === "LOGGER") {
    // do something
}

On local builds with webpack 4 in development mode the if is true, and on production mode is false.

But on azure, in both cases is false

process.env.REACT_APP_LOGGER === "LOGGER" // false

We have checked the value of process.env.REACT_APP_LOGGER and it is "LOGGER" type of string but the code is returning weird values:

console.log(process.env.REACT_APP_LOGGER)
console.log(process.env.REACT_APP_LOGGER === "LOGGER")
console.log(process.env.REACT_APP_LOGGER == "LOGGER")
console.log(typeof process.env.REACT_APP_LOGGER)

This is the output generated by the previous code:

LOGGER
false
false
string

Is there something I´m doing wrong? The weird part is that we have other string comparisons like this one and they are comparing correctly.

process.env.NODE_ENV === "production" // true

EDIT: When we look at the transpiled code we see the following:

console.log("LOGGER"),
console.log(!1),
console.log(!1),
console.log(f("LOGGER"));

So I guess that means the comparison is done during build time (and as this is a constant it makes sense).

Try process.env.REACT_APP_LOGGER.length and let me know what's the output. I think you've spaces — Ritwick Dey
– Ritwick Dey, Commented Nov 20, 2018 at 18:01
Try console.log(JSON.stringify(process.env.REACT_APP_LOGGER)) to make sure — Bergi
– Bergi, Commented Nov 20, 2018 at 18:09
The solution was pass both to stringify, like this: JSON.stringify(process.env.REACT_APP_LOGGER) === JSON.stringify("LOGGER") — Miguel Angel
– Miguel Angel, Commented Dec 1, 2018 at 8:20

Miguel Angel · Accepted Answer · 2019-01-30 21:00:09Z

11

The solution was pass both to stringify, like this:

JSON.stringify(process.env.REACT_APP_LOGGER) === JSON.stringify("LOGGER")

In this way, we could cast both variables in the same string format, both have the same length and both have the same value, but environment variables injected by Azure Process are not the same.

answered Jan 30, 2019 at 21:00

Miguel Angel

9838 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Exceptional NullPointer Over a year ago

In my case it still didnt work, because there was a trailing space at the end of the war. I used set NODE_ENV=develop && then another command. Maybe it will help someone debugging because the trailing space didnt show in the console.log

Rajan Over a year ago

you saved me lot of time @ExceptionalNullPointer by giving hint about trailing space. NODE_ENV=develop && node app.js not working for me. but NODE_ENV=develop& node app.js is working.

kedar sedai · Accepted Answer · 2020-12-01 11:16:52Z

6

It's because of the length of the value in the config file. We can solve this problem by using .trim().

if (process.env.NODE_ENV.trim() === 'development') {
    app.use(morgan('dev'));
}

edited Dec 1, 2020 at 11:16

kedar sedai

1,7203 gold badges20 silver badges29 bronze badges

answered Dec 1, 2020 at 8:05

ALI

611 silver badge1 bronze badge

Comments

Dharman · Accepted Answer · 2021-03-03 17:36:04Z

2

I had this problem, but for a different reason, using Windows CMD.

set ENVIRONMENT="prd"

process.env.ENVIRONMENT === 'prd' // false
process.env.ENVIRONMENT === '"prd"' // true, the double quotes are in the value

So the correct way to declare a variable in Windows CMD would be

set ENVIRONMENT=prd

edited Mar 3, 2021 at 17:36

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Mar 3, 2021 at 17:30

jevenson

1643 silver badges5 bronze badges

1 Comment

Case Silva Over a year ago

Thank you! So frustrating the subtle differences needed for win/other in the env variables.

komorihi · Accepted Answer · 2020-10-06 09:45:26Z

0

I found a workaround for this problem.

webpack.config.js

const webpack = require('webpack');

module.exports = {

  ...

  plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            EYES_MODE: process.env.EYES_MODE,
        }
    }),
  ],
};

myapp.ts

const { REACT_APP_LOGGER } = process.env;
console.log(REACT_APP_LOGGER === "LOGGER");

edited Oct 6, 2020 at 9:45

answered Oct 6, 2020 at 9:16

komorihi

665 bronze badges

Collectives™ on Stack Overflow

String comparison not working in Javascript when comparing an environment variable with a constant

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related