prefer-destructuring conflicts with Webpack replacements of process.env

[fregante]

Webpack can replace Node-like process.env.ENV_STUFF with the actual environment variable provided at build time: https://webpack.js.org/plugins/environment-plugin/

This process is pretty "dumb" as it's a simple search and replace of exactly process.env.${variableName} and nothing else. This means destructuring isn't possible with process.env.

More context found in: vercel/next.js#19420

What rule do you want to change?

prefer-destructuring

Does this change cause the rule to produce more or fewer warnings?

Fewer warnings

How will the change be implemented? (New option, new default behavior, etc.)?

New default I'd assume

Please provide some example code that this change will affect:

const ENVIRONMENT = process.env.ENVIRONMENT

What does the rule currently do for this code?

It suggests fixing it to this, breaking webpack’s replacement.

const {ENVIRONMENT} = process.env;

What will the rule do after it's changed?

Ignore process.env destructuring. It'd be great to even suggest the opposite (Avoid destructuring of process.env), but maybe that's asking too much.

[nzakas]

We generally try to avoid ultra-specific exceptions like this. This seems like a good case for using a disable comment instead.

[nzakas]

I took another look at this, and it seems like it would be pretty trivial for webpack to replace destructured environment variables with individual variable declarations. I think approaching this issue from the webpack side is probably a better approach.

[fregante]

I found the issue on Webpack’s repo, currently open for 4 years 😰 probably not pretty trivial

• EnvironmentPlugin: destructuring process.env doesn't work webpack/webpack#5392

[fregante]

Would it be possible to add a generic "exclude" option? So the user can specify which patterns to exclude based on the variable name

[njbmartin]

Just ran into this issue myself, I definitely prefer destructuring objects and don't particularly want to add comments to disable (as it's in a number of files.

As an example, having to do this:

/*eslint-disable */
const KLAVIYO_LIST_ID = process.env.KLAVIYO_LIST_ID;
const KLAVIYO_API_KEY = process.env.KLAVIYO_API_KEY;
const FAUNADB_SECRET = process.env.FAUNADB_SECRET;
const FAUNADB_DOMAIN = process.env.FAUNADB_DOMAIN;
/* eslint-enable */

It would be great if there was a way to add something in the eslint config to ignore process.env for this rule.