webpack.DefinePlugin and process.env.DEBUG

[kdziamura]

My webpack config:

...
plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production'),
      DEBUG: true
    }
  })
],

target: 'electron-main',
...

So webpack changes
process.env.DEBUG = namespaces;
to
true = namespaces;
which leading to error
ReferenceError: Invalid left-hand side in assignment

[aga5tya]

I too have this issue. @wontem , did you find a solution to this?

[eudaimos]

@aga5tya and @wontem and anyone else who comes along here
THIS WORKS!! :)
Using the following in my client-side index.js per the README suggestion of setting localStore.debug

if (localStorage && process.env.NODE_ENV === 'development') {
  localStorage.debug = process.env.DEBUG;
}

FYI - my first attempt checking window.localStorage didn't work, so be mindful of that.

@maintainers - this should be closable and maybe add the snippet to the README for the webpackers out there using the DefinePlugin

[SPGWhistler]

Although it isn't exactly the same issue, I had an issue where if I didn't specify the DEBUG environment variable, webpack was importing all of my environment variables - with the end result being my build environment variables ending up in my final source code. Not good. The quick and easy solution was to just add DEBUG="" to the environment variables. When webpack builds, it finds it, and just includes the empty string instead of all of the environment variables.

The issue was in browser.js, in the 'load' method, and after webpack did its thing, the output looked like this:
return !r && void 0 !== process && "env" in process && (r = __webpack_require__.i({ ...ALL MY ENVIRONMENT VARIABLES HERE ... }).DEBUG), r;.

Instead, if you add DEBUG="" as an environment variable, you get this:
return !r && void 0 !== process && "env" in process && (r = ""), r;

I do not know if this is due to my specific webpack configuration or what, but I thought I'd mention it incase anyone else has a similar issue.

[thebigredgeek]

@wontem you have to escape values that you want assigned to actual variables. Otherwise, Webpack is going to REPLACE the variables with literal values.

Should look like this, afaik:

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production'),
      DEBUG: JSON.stringify(true)
    }
  })
],

[moos]

@SPGWhistler Great find and good suggestion -- unfortunately it didn't work for me. I don't know, may be because I'm running in create-react-app.

This is definitely a show-stopper!

[Qix-]

@wontem did @thebigredgeek's comment answer your question?

[kdziamura]

@Qix- yes, the issue can be closed

[ghost]

This doesn't work when using

{
	'process.env.DEBUG': JSON.stringify( true ),
	'process.env.NODE_ENV': JSON.stringify( 'development' )
}

You still get the invalid true = namespaces;. I believe changing process.env to an object in DefinePlugin will have the undesirable side-effect of removing all the other node environment variables.

[ghost]

Could you set a variable to reference process.env and then assign the property to that reference? E.g.

function save(namespaces) {
  const env = process.env;
  if (null == namespaces) {
    // If you set a process.env field to null or undefined, it gets cast to the
    // string 'null' or 'undefined'. Just delete instead.
    delete env.DEBUG;
  } else {
    env.DEBUG = namespaces;
  }
}

I believe this would prevent DefinePlugin with messing with it.
@qix

[qix]

@Qix-

[ghost]

Sorry about that.

[Qix-]

If you set a process.env field to null or undefined,

I know this is painful for some users, but debug is not the place to properly fix this. Instead, webpack needs to solve this as process.env has a very clear contract for what should be in it.

It is not debug's job to clean up other peoples' messes. Please open a ticket with them as this is indeed a bug or poor devexp on their part.

[sprockow]

Was stuck on this problem for a long time, but found a hacky way to configure webpack.DefinePlugin in order to allow for the existence of a runtime process.env object.

First, add the following line to your webpack.DefinePlugin configuration

new webpack.DefinePlugin({
        ...existingDefinitions,
        "process.env.DEBUG": "runtime_process_env.DEBUG"
      })

Feel free to name it something better than runtime_process_env.

Then in your app's index.js, ensure that a global runtime_process_env is available

window.runtime_process_env = {
  DEBUG: true
};

The line process.env.DEBUG = namespaces; will become runtime_process_env.DEBUG = namespaces;

[sprockow]

Also @qix , concerning your claim about process.env having a "very clear contract" , can you link me to some supporting resources? Apart from this webpack.DefinePlugin issue, I'm not sure that runtime code should be mutating environment variables. Is there a way we could refactor this code to avoid process.env.DEBUG assignment? Could that state be stored elsewhere?

[Qix-]

process.env is a string=>string map. If you give it a non-string value, it will even stringize it. This is the contract. Code that violates that contract is inherently broken or malformed and is unsupported.

I agree that setting DEBUG in code is wrong. Don't do that. I'd also argue that .enable() is an anti-pattern and I wish it was never added.