fix(define): should not stringify vite internal env (#12120)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>

Author: sun0day

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

@@ -31,16 +31,24 @@ export function definePlugin(config: ResolvedConfig): Plugin {
     })
   }
 
-  const env = { ...config.env }
   const userDefine: Record<string, string> = {}
+  const userDefineEnv: Record<string, string> = {}
   for (const key in config.define) {
     const val = config.define[key]
     userDefine[key] = typeof val === 'string' ? val : JSON.stringify(val)
 
     // make sure `import.meta.env` object has user define properties
-    const match = key.match(metaEnvRe)
-    if (match) {
-      env[match[1]] = val
+    if (isBuild) {
+      const match = key.match(metaEnvRe)
+      if (match) {
+        userDefineEnv[match[1]] =
+          // test if value is raw identifier to wrap with __vite__ so when
+          // stringified for `import.meta.env`, we can remove the quotes and
+          // retain being an identifier
+          typeof val === 'string' && /^[\p{L}_$]/u.test(val.trim())
+            ? `__vite__${val}__vite__`
+            : val
+      }
     }
   }
 
@@ -49,16 +57,21 @@ export function definePlugin(config: ResolvedConfig): Plugin {
   const importMetaKeys: Record<string, string> = {}
   const importMetaFallbackKeys: Record<string, string> = {}
   if (isBuild) {
-    env.SSR = !!config.build.ssr
-
+    const env: Record<string, any> = {
+      ...config.env,
+      SSR: !!config.build.ssr,
+    }
     // set here to allow override with config.define
     importMetaKeys['import.meta.hot'] = `undefined`
     for (const key in env) {
       importMetaKeys[`import.meta.env.${key}`] = JSON.stringify(env[key])
     }
     Object.assign(importMetaFallbackKeys, {
       'import.meta.env.': `({}).`,
-      'import.meta.env': JSON.stringify(env),
+      'import.meta.env': JSON.stringify({ ...env, ...userDefineEnv }).replace(
+        /"__vite__(.+?)__vite__"/g,
+        (_, val) => val,
+      ),
     })
   }
 

playground/legacy/__tests__/legacy.spec.ts

@@ -23,6 +23,7 @@ test('import.meta.env.LEGACY', async () => {
     isBuild ? 'true' : 'false',
     true,
   )
+  await untilUpdated(() => page.textContent('#env-equal'), 'true', true)
 })
 
 // https://github.com/vitejs/vite/issues/3400

playground/legacy/index.html

@@ -1,5 +1,6 @@
 <h1 id="app"></h1>
 <div id="env"></div>
+<div id="env-equal"></div>
 <div id="iterators"></div>
 <div id="features-after-corejs-3"></div>
 <div id="async-generator"></div>

playground/legacy/main.js

@@ -20,6 +20,9 @@ if (import.meta.env.LEGACY) {
 
 text('#env', `is legacy: ${isLegacy}`)
 
+const metaEnvObj = import.meta.env
+text('#env-equal', import.meta.env.LEGACY === metaEnvObj.LEGACY)
+
 // Iterators
 text('#iterators', [...new Set(['hello'])].join(''))