[middleware] support destructuring for env vars in static analysis (#…

…37556)

This commit enables the following patterns in Middleware:

```ts
// with a dot notation
const { ENV_VAR, "ENV-VAR": myEnvVar } = process.env;

// or with an object access
const { ENV_VAR2, "ENV-VAR2": myEnvVar2 } = process["env"];
```

### Related

- @cramforce asked this fixed here: #37514 (comment)



## Feature

- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -164,18 +164,26 @@ function getCodeAnalizer(params: {
  })
  }
 
+ /**
+ * Declares an environment variable that is being used in this module
+ * through this static analysis.
+ */
+ const addUsedEnvVar = (envVarName: string) => {
+ const buildInfo = getModuleBuildInfo(parser.state.module)
+ if (buildInfo.nextUsedEnvVars === undefined) {
+ buildInfo.nextUsedEnvVars = new Set()
+ }
+
+ buildInfo.nextUsedEnvVars.add(envVarName)
+ }
+
  /**
  * A handler for calls to `process.env` where we identify the name of the
  * ENV variable being assigned and store it in the module info.
  */
  const handleCallMemberChain = (_: unknown, members: string[]) => {
  if (members.length >= 2 && members[0] === 'env') {
- const buildInfo = getModuleBuildInfo(parser.state.module)
- if (buildInfo.nextUsedEnvVars === undefined) {
- buildInfo.nextUsedEnvVars = new Set()
- }
-
- buildInfo.nextUsedEnvVars.add(members[1])
+ addUsedEnvVar(members[1])
  if (!isInMiddlewareLayer(parser)) {
  return true
  }
@@ -226,6 +234,37 @@ function getCodeAnalizer(params: {
  hooks.new.for('NextResponse').tap(NAME, handleNewResponseExpression)
  hooks.callMemberChain.for('process').tap(NAME, handleCallMemberChain)
  hooks.expressionMemberChain.for('process').tap(NAME, handleCallMemberChain)
+
+ /**
+ * Support static analyzing environment variables through
+ * destructuring `process.env` or `process["env"]`:
+ *
+ * const { MY_ENV, "MY-ENV": myEnv } = process.env
+ * ^^^^^^ ^^^^^^
+ */
+ hooks.declarator.tap(NAME, (declarator) => {
+ if (
+ declarator.init?.type === 'MemberExpression' &&
+ isProcessEnvMemberExpression(declarator.init) &&
+ declarator.id?.type === 'ObjectPattern'
+ ) {
+ for (const property of declarator.id.properties) {
+ if (property.type === 'RestElement') continue
+ if (
+ property.key.type === 'Literal' &&
+ typeof property.key.value === 'string'
+ ) {
+ addUsedEnvVar(property.key.value)
+ } else if (property.key.type === 'Identifier') {
+ addUsedEnvVar(property.key.name)
+ }
+ }
+
+ if (!isInMiddlewareLayer(parser)) {
+ return true
+ }
+ }
+ })
  registerUnsupportedApiHooks(parser, compilation)
  }
 }
@@ -538,3 +577,14 @@ function isNullLiteral(expr: any) {
 function isUndefinedIdentifier(expr: any) {
  return expr.name === 'undefined'
 }
+
+function isProcessEnvMemberExpression(memberExpression: any): boolean {
+ return (
+ memberExpression.object?.type === 'Identifier' &&
+ memberExpression.object.name === 'process' &&
+ ((memberExpression.property?.type === 'Literal' &&
+ memberExpression.property.value === 'env') ||
+ (memberExpression.property?.type === 'Identifier' &&
+ memberExpression.property.name === 'env'))
+ )
+}

test/integration/middleware-general/middleware.js

@@ -66,6 +66,19 @@ export async function middleware(request) {
  // The next line is required to allow to find the env variable
  // eslint-disable-next-line no-unused-expressions
  process.env.MIDDLEWARE_TEST
+
+ // The next line is required to allow to find the env variable
+ // eslint-disable-next-line no-unused-expressions
+ const { ANOTHER_MIDDLEWARE_TEST } = process.env
+ if (!ANOTHER_MIDDLEWARE_TEST) {
+ console.log('missing ANOTHER_MIDDLEWARE_TEST')
+ }
+
+ const { 'STRING-ENV-VAR': stringEnvVar } = process['env']
+ if (!stringEnvVar) {
+ console.log('missing STRING-ENV-VAR')
+ }
+
  return serializeData(JSON.stringify({ process: { env: process.env } }))
  }
 

test/integration/middleware-general/test/index.test.js

@@ -33,6 +33,8 @@ describe('Middleware Runtime', () => {
  context.buildId = 'development'
  context.app = await launchApp(context.appDir, context.appPort, {
  env: {
+ ANOTHER_MIDDLEWARE_TEST: 'asdf2',
+ 'STRING-ENV-VAR': 'asdf3',
  MIDDLEWARE_TEST: 'asdf',
  NEXT_RUNTIME: 'edge',
  },
@@ -100,6 +102,8 @@ describe('Middleware Runtime', () => {
  context.appPort = await findPort()
  context.app = await nextStart(context.appDir, context.appPort, {
  env: {
+ ANOTHER_MIDDLEWARE_TEST: 'asdf2',
+ 'STRING-ENV-VAR': 'asdf3',
  MIDDLEWARE_TEST: 'asdf',
  NEXT_RUNTIME: 'edge',
  },
@@ -120,7 +124,7 @@ describe('Middleware Runtime', () => {
  )
  expect(manifest.middleware).toEqual({
  '/': {
- env: ['MIDDLEWARE_TEST'],
+ env: ['MIDDLEWARE_TEST', 'ANOTHER_MIDDLEWARE_TEST', 'STRING-ENV-VAR'],
  files: ['server/edge-runtime-webpack.js', 'server/middleware.js'],
  name: 'middleware',
  page: '/',
@@ -215,6 +219,8 @@ function tests(context, locale = '') {
  expect(readMiddlewareJSON(res)).toEqual({
  process: {
  env: {
+ ANOTHER_MIDDLEWARE_TEST: 'asdf2',
+ 'STRING-ENV-VAR': 'asdf3',
  MIDDLEWARE_TEST: 'asdf',
  NEXT_RUNTIME: 'edge',
  },