fix(legacy): fix broken build when renderModernChunks=false & polyfills=false (fix #14324) (#14346)

Author: k-yle

packages/plugin-legacy/src/index.ts

@@ -265,15 +265,17 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
       }
 
       // legacy bundle
-      if (legacyPolyfills.size) {
+      if (options.polyfills !== false) {
         // check if the target needs Promise polyfill because SystemJS relies on it
         // https://github.com/systemjs/systemjs#ie11-support
         await detectPolyfills(
           `Promise.resolve(); Promise.all();`,
           targets,
           legacyPolyfills,
         )
+      }
 
+      if (legacyPolyfills.size || !options.externalSystemJS) {
         isDebug &&
           console.log(
             `[@vitejs/plugin-legacy] legacy polyfills:`,

playground/legacy/__tests__/no-polyfills-no-systemjs/no-polyfills-no-systemjs.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from 'vitest'
+import { isBuild, page, untilUpdated, viteTestUrl } from '~utils'
+
+test.runIf(isBuild)('includes only a single script tag', async () => {
+  await page.goto(viteTestUrl + '/no-polyfills-no-systemjs.html')
+
+  await untilUpdated(
+    () => page.getAttribute('#vite-legacy-entry', 'data-src'),
+    /.\/assets\/index-legacy-(.+)\.js/,
+    true,
+  )
+
+  expect(await page.locator('script').count()).toBe(1)
+  expect(await page.locator('#vite-legacy-polyfill').count()).toBe(0)
+  expect(await page.locator('#vite-legacy-entry').count()).toBe(1)
+})

playground/legacy/__tests__/no-polyfills/no-polyfills.spec.ts

@@ -0,0 +1,20 @@
+import { test } from 'vitest'
+import { isBuild, page, untilUpdated, viteTestUrl } from '~utils'
+
+test('should load and execute the JS file', async () => {
+  await page.goto(viteTestUrl + '/no-polyfills.html')
+  await untilUpdated(() => page.textContent('main'), '👋', true)
+})
+
+test.runIf(isBuild)('includes a script tag for SystemJS', async () => {
+  await untilUpdated(
+    () => page.getAttribute('#vite-legacy-polyfill', 'src'),
+    /.\/assets\/polyfills-legacy-(.+)\.js/,
+    true,
+  )
+  await untilUpdated(
+    () => page.getAttribute('#vite-legacy-entry', 'data-src'),
+    /.\/assets\/index-legacy-(.+)\.js/,
+    true,
+  )
+})

playground/legacy/no-polyfills-no-systemjs.html

@@ -0,0 +1,3 @@
+<meta charset="UTF-8" />
+<main></main>
+<script type="module" src="./no-polyfills-no-systemjs.js"></script>

playground/legacy/no-polyfills-no-systemjs.js

@@ -0,0 +1 @@
+document.querySelector('main').innerHTML = '👋'

playground/legacy/no-polyfills.html

@@ -0,0 +1,3 @@
+<meta charset="UTF-8" />
+<main></main>
+<script type="module" src="./no-polyfills.js"></script>

playground/legacy/no-polyfills.js

@@ -0,0 +1 @@
+document.querySelector('main').innerHTML = '👋'

playground/legacy/package.json

@@ -8,6 +8,8 @@
     "build": "vite build --debug legacy",
     "build:custom-filename": "vite --config ./vite.config-custom-filename.js build  --debug legacy",
     "build:multiple-output": "vite --config ./vite.config-multiple-output.js build",
+    "build:no-polyfills": "vite --config ./vite.config-no-polyfills.js build",
+    "build:no-polyfills-no-systemjs": "vite --config ./vite.config-no-polyfills-no-systemjs.js build",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
     "preview": "vite preview"
   },

playground/legacy/vite.config-no-polyfills-no-systemjs.js

@@ -0,0 +1,30 @@
+import path from 'node:path'
+import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    legacy({
+      renderModernChunks: false,
+      polyfills: false,
+      externalSystemJS: true,
+    }),
+    {
+      name: 'remove crossorigin attribute',
+      transformIndexHtml: (html) => html.replaceAll('crossorigin', ''),
+      enforce: 'post',
+    },
+  ],
+
+  build: {
+    rollupOptions: {
+      input: {
+        index: path.resolve(__dirname, 'no-polyfills-no-systemjs.html'),
+      },
+    },
+  },
+  testConfig: {
+    baseRoute: '/no-polyfills-no-systemjs/',
+  },
+})

playground/legacy/vite.config-no-polyfills.js

@@ -0,0 +1,29 @@
+import path from 'node:path'
+import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    legacy({
+      renderModernChunks: false,
+      polyfills: false,
+    }),
+    {
+      name: 'remove crossorigin attribute',
+      transformIndexHtml: (html) => html.replaceAll('crossorigin', ''),
+      enforce: 'post',
+    },
+  ],
+
+  build: {
+    rollupOptions: {
+      input: {
+        index: path.resolve(__dirname, 'no-polyfills.html'),
+      },
+    },
+  },
+  testConfig: {
+    baseRoute: '/no-polyfills/',
+  },
+})