`prefer-destructuring` conflicts with Webpack replacements of `process.env`

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: https://github.com/vercel/next.js/issues/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.

[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.