fix(esbuild): always support dynamic import and import meta (#9105)

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

@@ -21,7 +21,11 @@ describe('resolveEsbuildTranspileOptions', () => {
       format: 'esm',
       keepNames: true,
       minify: true,
-      treeShaking: true
+      treeShaking: true,
+      supported: {
+        'dynamic-import': true,
+        'import-meta': true
+      }
     })
   })
 
@@ -62,7 +66,11 @@ describe('resolveEsbuildTranspileOptions', () => {
       minifyIdentifiers: false,
       minifySyntax: true,
       minifyWhitespace: true,
-      treeShaking: true
+      treeShaking: true,
+      supported: {
+        'dynamic-import': true,
+        'import-meta': true
+      }
     })
   })
 
@@ -87,7 +95,11 @@ describe('resolveEsbuildTranspileOptions', () => {
       minifyIdentifiers: false,
       minifySyntax: false,
       minifyWhitespace: false,
-      treeShaking: false
+      treeShaking: false,
+      supported: {
+        'dynamic-import': true,
+        'import-meta': true
+      }
     })
   })
 
@@ -114,7 +126,11 @@ describe('resolveEsbuildTranspileOptions', () => {
       minifyIdentifiers: true,
       minifySyntax: true,
       minifyWhitespace: false,
-      treeShaking: true
+      treeShaking: true,
+      supported: {
+        'dynamic-import': true,
+        'import-meta': true
+      }
     })
   })
 
@@ -138,7 +154,11 @@ describe('resolveEsbuildTranspileOptions', () => {
       format: 'cjs',
       keepNames: true,
       minify: true,
-      treeShaking: true
+      treeShaking: true,
+      supported: {
+        'dynamic-import': true,
+        'import-meta': true
+      }
     })
   })
 
@@ -167,7 +187,11 @@ describe('resolveEsbuildTranspileOptions', () => {
       minifyIdentifiers: true,
       minifySyntax: true,
       minifyWhitespace: false,
-      treeShaking: true
+      treeShaking: true,
+      supported: {
+        'dynamic-import': true,
+        'import-meta': true
+      }
     })
   })
 
@@ -197,7 +221,11 @@ describe('resolveEsbuildTranspileOptions', () => {
       minifyIdentifiers: true,
       minifySyntax: false,
       minifyWhitespace: true,
-      treeShaking: true
+      treeShaking: true,
+      supported: {
+        'dynamic-import': true,
+        'import-meta': true
+      }
     })
   })
 })

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

@@ -298,10 +298,19 @@ export function resolveEsbuildTranspileOptions(
   // pure annotations and break tree-shaking
   // https://github.com/vuejs/core/issues/2860#issuecomment-926882793
   const isEsLibBuild = config.build.lib && format === 'es'
+  const esbuildOptions = config.esbuild || {}
   const options: TransformOptions = {
-    ...config.esbuild,
+    ...esbuildOptions,
     target: target || undefined,
-    format: rollupToEsbuildFormatMap[format]
+    format: rollupToEsbuildFormatMap[format],
+    // the final build should always support dynamic import and import.meta.
+    // if they need to be polyfilled, plugin-legacy should be used.
+    // plugin-legacy detects these two features when checking for modern code.
+    supported: {
+      'dynamic-import': true,
+      'import-meta': true,
+      ...esbuildOptions.supported
+    }
   }
 
   // If no minify, disable all minify options

playground/build-old/__tests__/build-old.spec.ts

@@ -0,0 +1,11 @@
+import { describe, test } from 'vitest'
+import { page } from '~utils'
+
+describe('syntax preserve', () => {
+  test('import.meta.url', async () => {
+    expect(await page.textContent('.import-meta-url')).toBe('string')
+  })
+  test('dynamic import', async () => {
+    expect(await page.textContent('.dynamic-import')).toBe('success')
+  })
+})

playground/build-old/dynamic.js

@@ -0,0 +1 @@
+export default 'success'

playground/build-old/index.html

@@ -0,0 +1,19 @@
+<h1>Build Old</h1>
+
+<h2>import meta url</h2>
+<p class="import-meta-url"></p>
+
+<h2>dynamic import</h2>
+<p class="dynamic-import"></p>
+
+<script type="module">
+  text('.import-meta-url', typeof import.meta.url)
+
+  import('./dynamic.js').then((m) => {
+    text('.dynamic-import', m.default)
+  })
+
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
+</script>

playground/build-old/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "test-build-old",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  }
+}

playground/build-old/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    // old browsers only
+    target: ['chrome60']
+  }
+})