Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webpack.DefinePlugin and process.env.DEBUG #467

Closed
kdziamura opened this issue Jun 9, 2017 · 15 comments · May be fixed by #560
Closed

webpack.DefinePlugin and process.env.DEBUG #467

kdziamura opened this issue Jun 9, 2017 · 15 comments · May be fixed by #560
Labels
awaiting-response This issue or pull request is awaiting a user's response question This issue asks a question or requests usage support

Comments

@kdziamura
Copy link

kdziamura commented Jun 9, 2017

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
Copy link

aga5tya commented Jun 29, 2017

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

@eudaimos
Copy link

eudaimos commented Jul 3, 2017

@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
Copy link

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
Copy link
Contributor

@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
Copy link

moos commented Apr 13, 2018

@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-
Copy link
Member

Qix- commented Jun 20, 2018

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

@Qix- Qix- added awaiting-response This issue or pull request is awaiting a user's response question This issue asks a question or requests usage support labels Jun 20, 2018
@kdziamura
Copy link
Author

@Qix- yes, the issue can be closed

@ghost
Copy link

ghost commented Jul 12, 2018

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
Copy link

ghost commented Jul 13, 2018

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
Copy link

qix commented Jul 14, 2018

@Qix-

@ghost
Copy link

ghost commented Jul 14, 2018

Sorry about that.

@ghost ghost mentioned this issue Jul 14, 2018
@Qix-
Copy link
Member

Qix- commented Dec 19, 2018

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
Copy link

sprockow commented Mar 8, 2019

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
Copy link

sprockow commented Mar 8, 2019

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-
Copy link
Member

Qix- commented Mar 9, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
awaiting-response This issue or pull request is awaiting a user's response question This issue asks a question or requests usage support
Development

Successfully merging a pull request may close this issue.

9 participants