refactor(build): change a strategy to handle import.meta.env and undefined key

Author: yuzheng14

packages/vite/src/node/__tests__/plugins/define.spec.ts

@@ -82,8 +82,19 @@ describe('definePlugin', () => {
       await transform(
         'const isLegacy = import.meta.env.LEGACY;\nimport.meta.env.UNDEFINED && console.log(import.meta.env.UNDEFINED);',
       ),
-    ).toBe(
-      'var define_import_meta_env_default = {"BASE_URL": "/", "MODE": "development", "DEV": true, "PROD": false, "SSR": false, "LEGACY": __VITE_IS_LEGACY__};\nconst isLegacy = __VITE_IS_LEGACY__;\ndefine_import_meta_env_default.UNDEFINED && console.log(define_import_meta_env_default.UNDEFINED);\n',
-    )
+    ).toMatchInlineSnapshot(`
+      "const isLegacy = __VITE_IS_LEGACY__;
+      "
+    `)
+  })
+
+  test('replace bare import.meta.env', async () => {
+    const transform = await createDefinePluginTransform()
+    expect(await transform('const env = import.meta.env;'))
+      .toMatchInlineSnapshot(`
+      "const __vite_import_meta_env__ = {"BASE_URL": "/", "MODE": "development", "DEV": true, "PROD": false, "SSR": false};
+      const env = __vite_import_meta_env__;
+      "
+    `)
   })
 })

packages/vite/src/node/plugins/define.ts

@@ -2,12 +2,14 @@ import { transform } from 'esbuild'
 import { TraceMap, decodedMap, encodedMap } from '@jridgewell/trace-mapping'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
-import { escapeRegex, getHash } from '../utils'
+import { escapeRegex } from '../utils'
 import { isCSSRequest } from './css'
 import { isHTMLRequest } from './html'
 
 const nonJsRe = /\.json(?:$|\?)/
 const isNonJsRequest = (request: string): boolean => nonJsRe.test(request)
+const importMetaEnvMarker = '__vite_import_meta_env__'
+const bareImportMetaEnvRe = /import\.meta\.env(?!\.)\b/
 
 export function definePlugin(config: ResolvedConfig): Plugin {
   const isBuild = config.command === 'build'
@@ -69,13 +71,24 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       define['import.meta.env.SSR'] = ssr + ''
     }
     if ('import.meta.env' in define) {
-      define['import.meta.env'] = serializeDefine({
-        ...importMetaEnvKeys,
-        SSR: ssr + '',
-        ...userDefineEnv,
-      })
+      define['import.meta.env'] = importMetaEnvMarker
     }
 
+    const importMetaEnv = {
+      ...importMetaEnvKeys,
+      SSR: ssr + '',
+      ...userDefineEnv,
+    }
+    const importMetaEnvVal = serializeDefine(importMetaEnv)
+    // replace bare `import.meta.env` manually
+    const banner = `const ${importMetaEnvMarker} = ${importMetaEnvVal};`
+    // create regex pattern to match undefined `import.meta.env` properties
+    // to replace it to `undefined` directly
+    const undefinedPattern = new RegExp(
+      `import\\.meta\\.env\\.(?!${Object.keys(importMetaEnv).map(escapeRegex).join('|')}).+?\\b`,
+      'g',
+    )
+
     // Create regex pattern as a fast check before running esbuild
     const patternKeys = Object.keys(userDefine)
     if (replaceProcessEnv && Object.keys(processEnv).length) {
@@ -88,7 +101,7 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       ? new RegExp(patternKeys.map(escapeRegex).join('|'))
       : null
 
-    return [define, pattern] as const
+    return [define, pattern, undefinedPattern, banner] as const
   }
 
   const defaultPattern = generatePattern(false)
@@ -116,14 +129,30 @@ export function definePlugin(config: ResolvedConfig): Plugin {
         return
       }
 
-      const [define, pattern] = ssr ? ssrPattern : defaultPattern
+      const [define, pattern, undefinedPattern, banner] = ssr
+        ? ssrPattern
+        : defaultPattern
       if (!pattern) return
 
       // Check if our code needs any replacements before running esbuild
       pattern.lastIndex = 0
       if (!pattern.test(code)) return
 
-      return await replaceDefine(code, id, define, config)
+      // process undefined imports.meta.env properties
+      const defineWithUndefined = { ...define }
+      undefinedPattern.lastIndex = 0
+      for (const undefinedEnvKey of [...code.matchAll(undefinedPattern)]) {
+        defineWithUndefined[undefinedEnvKey[0]] = 'undefined'
+      }
+
+      return await replaceDefine(
+        code,
+        id,
+        defineWithUndefined,
+        config,
+        // if there is bare `import.meta.env`, then add the manual `import.meta.env`
+        bareImportMetaEnvRe.test(code) ? banner : undefined,
+      )
     },
   }
 }
@@ -133,21 +162,8 @@ export async function replaceDefine(
   id: string,
   define: Record<string, string>,
   config: ResolvedConfig,
+  banner?: string,
 ): Promise<{ code: string; map: string | null }> {
-  // Because esbuild only allows JSON-serializable values, and `import.meta.env`
-  // may contain values with raw identifiers, making it non-JSON-serializable,
-  // we replace it with a temporary marker and then replace it back after to
-  // workaround it. This means that esbuild is unable to optimize the `import.meta.env`
-  // access, but that's a tradeoff for now.
-  const replacementMarkers: Record<string, string> = {}
-  const env = define['import.meta.env']
-  if (env && !canJsonParse(env)) {
-    const marker = `{ "_${getHash(env, env.length - 2)}_": "" }`
-    // result generated by esbuild will not have the quotes around the keys
-    replacementMarkers[marker.replace('"', '').replace('"', '')] = env
-    define = { ...define, 'import.meta.env': marker }
-  }
-
   const esbuildOptions = config.esbuild || {}
 
   const result = await transform(code, {
@@ -157,6 +173,7 @@ export async function replaceDefine(
     define,
     sourcefile: id,
     sourcemap: config.command === 'build' ? !!config.build.sourcemap : true,
+    banner,
   })
 
   // remove esbuild's <define:...> source entries
@@ -179,10 +196,6 @@ export async function replaceDefine(
     }
   }
 
-  for (const marker in replacementMarkers) {
-    result.code = result.code.replaceAll(marker, replacementMarkers[marker])
-  }
-
   return {
     code: result.code,
     map: result.map || null,