How to replace process.env variables if it is undefined

[dmitryuk]

I have a big multi-project repository, each project may use common module.
Common module have tons process.env.VARIABLE_N, but most of them didn't set with webpack definePlugin specifically for current project and should be undefined.

I'm looking for a feature to set undefined value to all not set process.env.* variables with definePlugin:

//actual
const BASE_URL = process.env.BASE_URL || "/";

// expected
const BASE_URL = undefined || "/";

//webpack
plugins.push(new definePlugin(
// nothing I want to set here
));

[alexander-akait]

Why you need undefined? We are specially generate false in logical operators to prevent mistakes by developers and undefined and false in logical operators are the same

[alexander-akait]

Sorry, I don't understand you, there is no process.env.VARIABLES in your example. We're replacing it with false only in logical operators.

[dmitryuk]

In my example

process.env.BASE_URL || "/";

will not be changed to

false || "/";

[alexander-akait]

What won't be changed to? Please describe the problem with an example. Do you mean process.env.VARIABLES || { a: 1 }? false will work too

[GeorgeTaveras1231]

@alexander-akait I think I understand the problem as I'm having it as well (@dmitryuk correct me if I misrepresent the problem).

The goal is to replace any reference of process.env.* with undefined. The current methodology forces devs to track all environment variables used in the bundle and define them in the webpack config either by using the EnvironmentPlugin or the DefinePlugin. This is not ideal especially when using 3rd party libs that may list any arbitrary set of env vars.

The workarounds advertised in other places are

1. Define process.env as {}

new webpack.DefinePlugin({'process.env': '{}'});

This produces the following

// Source code
const BASE_URL = process.env.BASE_URL || "/";

// output
const BASE_URL = ({}).BASE_URL || "/";

This is ok but can interfere with dead-code elimination
For example if the code is something like

if (({}).THIRD_PARTY_LIB_DEBUG) {
  // Some verbose code that needs to be eliminated in certain cases
}

2. Use the ProvidePlugin to provide process using the process npm package

This works because the process npm package provides a browser friendly implementation where process.env is set to an empty object ({}). In practice, this has the same effect as the example above - which may interfere with dead-code elimination, and has the extra bundle size cost (as it provides stubs for other process APIs that may not be needed.

new webpack.ProvidePlugin({
    process: 'process/browser',
}),

What I would be interested in seeing from webpack (and I think would resolve @dmitryuk 's problem as well) is having a way to set all env variables that are not defined to undefined.

This may make sense as a new feature of the EnvironmentPlugin, something like

new webpack.EnvironmentPlugin({
  // var defaults
}, {
  replaceAllUndefined: true
})

[alexander-akait]

What you try to achieve? And why you need to replace it on undefined

This is ok but can interfere with dead-code elimination

Any false values are dead code, using if (false) {} and if (undefined) {} have the same semantic (like webpack doing)

The goal is to replace any reference of process.env.* with undefined.

Because it is unsafe operation and can break the code (do you know how developer are using process.env in vendor code? I am not. What we should do when developer has if (process.env) {}? Can be dangerous replacement).