search

postcss / postcss-load-config

Autoload Config for PostCSS
MIT License
642 stars 72 forks source link

Problem with process.env.NODE_ENV #196

Closed ryancwalsh closed 3 years ago

ryancwalsh commented 4 years ago

I think https://github.com/michael-ciniawsky/postcss-load-config/blob/v2.1.0/src/index.js#L59 might be a bug.

After using webpack to compile my JS dependencies, I load the my site in my browser and see a console error:

"Uncaught SyntaxError: Invalid left-hand side in assignment"

And it points to:

if (!ctx.env) {
  "development" = 'development'
}

I think build processes often overwrite process.env.NODE_ENV, right?

I'm not sure code is ever supposed to be changing that object.

P.S. Related: https://stackoverflow.com/a/52872875/470749

RyanZim commented 4 years ago

Yeah, I can see how that's an issue. Bigger question is, why are you trying to webpack postcss-load-config?

ryancwalsh commented 4 years ago

@RyanZim Thanks for your response. I'm not trying to webpack postcss-load-config but I think https://github.com/zhentian-wan/angular-md-table/tree/v1.4.0/dist is, and my company wanted to use that library. I think it pulls in https://github.com/zhentian-wan/angular-md-table/blob/v1.4.0/package.json#L83 "postcss-loader" which probably pulls yours in.

I wish we weren't using AngularJs or angular-md-table but for now we are.

RyanZim commented 4 years ago

It should not be bundling in devDependencies; there's no alternate universe in which that's a sane thing to do. Either angular-md-table is broken, or your bundling code is doing the wrong thing. I cannot see how the dist of angular-md-table would be pulling in postcss-loader, looks like a fairly stock webpack setup, and that wouldn't bundle it in.

ryancwalsh commented 4 years ago

I'm not disagreeing with you, and I feel like you're more familiar with all of this than I am.

When I fork postcss-load-config and then comment out https://github.com/michael-ciniawsky/postcss-load-config/blob/v2.1.0/src/index.js#L59, I think I don't get the error anymore.

So that might be the easiest way for me to move forward, even if you're right that there are problems elsewhere too. Thanks.

OriginalEXE commented 4 years ago

I am running into the same issue.

Context:

In my Electron app, I am using the vite bundler (https://github.com/vitejs/vite) which relies on postcss-load-config. Since it's getting bundled, webpack's DefinePlugin is being ran over it and causes the issue described above. I found no way to blacklist specific modules from DefinePlugin unfortunately.

RyanZim commented 4 years ago

Why are you bundling your bundler?

OriginalEXE commented 4 years ago

It's complicated :D

Basically, electron-forge webpack plugin bundles all of the dependencies, vite included. I am using vite because my app provides a visual way to trigger the development, and I use vite node API to do that.

In the meantime, I have realized that vite assigns to process.env in one place as well, so I had to make some changes to the way I import vite, and this is no longer an issue for me at the moment.

michael-ciniawsky commented 3 years ago

postcss-load-config is currently node module and not intended to work in the browser, maybe this will change one day, but it's unlikely. In the meantime I'm going to close this issue as a 'won't fix'. Feel free to reopen

marvix commented 2 years ago

It's complicated :D

Basically, electron-forge webpack plugin bundles all of the dependencies, vite included. I am using vite because my app provides a visual way to trigger the development, and I use vite node API to do that.

In the meantime, I have realized that vite assigns to process.env in one place as well, so I had to make some changes to the way I import vite, and this is no longer an issue for me at the moment.

Would you please share the solution?

matthewhutchings commented 1 year ago

getting this issue 2 years later... Just using the laravel docker app..