fix: import.meta.env and process.env undefined variable replacement (fix #8663) (#10958)

Co-authored-by: bluwy <[email protected]>
fix #8663

Author: julienv3

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

@@ -85,7 +85,7 @@ export function definePlugin(config: ResolvedConfig): Plugin {
               .join('|') +
             // Mustn't be followed by a char that can be part of an identifier
             // or an assignment (but allow equality operators)
-            ')(?![\\p{L}\\p{N}_$]|\\s*?=[^=])',
+            ')(?:(?<=\\.)|(?![\\p{L}\\p{N}_$]|\\s*?=[^=]))',
           'gu'
         )
       : null

playground/define/__tests__/define.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from 'vitest'
 import viteConfig from '../vite.config'
-import { page } from '~utils'
+import { isBuild, page } from '~utils'
 
 test('string', async () => {
   const defines = viteConfig.define
@@ -44,4 +44,10 @@ test('string', async () => {
   expect(await page.textContent('.define-in-dep')).toBe(
     defines.__STRINGIFIED_OBJ__
   )
+  expect(await page.textContent('.import-meta-env-undefined')).toBe(
+    isBuild ? '({}).UNDEFINED' : 'import.meta.env.UNDEFINED'
+  )
+  expect(await page.textContent('.process-env-undefined')).toBe(
+    isBuild ? '({}).UNDEFINED' : 'process.env.UNDEFINED'
+  )
 })

playground/define/commonjs-dep/index.js

@@ -1 +1,5 @@
-module.exports = { defined: __STRINGIFIED_OBJ__ }
+module.exports = {
+  defined: __STRINGIFIED_OBJ__,
+  importMetaEnvUndefined: 'import.meta.env.UNDEFINED',
+  processEnvUndefined: 'process.env.UNDEFINED'
+}

playground/define/index.html

@@ -17,6 +17,10 @@ <h1>Define</h1>
 <p>define variable in html: <code class="exp-define">__EXP__</code></p>
 <p>import json: <code class="import-json"></code></p>
 <p>define in dep: <code class="define-in-dep"></code></p>
+<p>
+  import.meta.env.UNDEFINED: <code class="import-meta-env-undefined"></code>
+</p>
+<p>process.env.UNDEFINED: <code class="process-env-undefined"></code></p>
 
 <script type="module">
   const __VAR_NAME__ = true // ensure define doesn't replace var name
@@ -52,8 +56,10 @@ <h1>Define</h1>
     document.querySelector(el).textContent = text
   }
 
-  import { defined } from 'dep'
+  import { defined, importMetaEnvUndefined, processEnvUndefined } from 'dep'
   text('.define-in-dep', JSON.stringify(defined))
+  text('.import-meta-env-undefined', importMetaEnvUndefined)
+  text('.process-env-undefined', processEnvUndefined)
 </script>
 
 <style>