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

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.

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-

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.