fix: modulepreload polyfill only during build (fix #4786)

packages/playground/backend-integration/__tests__/backend-integration.spec.ts

@@ -32,6 +32,12 @@ if (isBuild) {
     expect(htmlEntry.assets.length).toEqual(1)
   })
 } else {
+  test('No ReferenceError', async () => {
+    browserErrors.forEach((error) => {
+      expect(error.name).not.toBe('ReferenceError')
+    })
+  })
+
   describe('CSS HMR', () => {
     test('preserve the base in CSS HMR', async () => {
       await untilUpdated(() => getColor('body'), 'black') // sanity check

packages/playground/backend-integration/frontend/entrypoints/main.ts

@@ -1,3 +1,5 @@
+import 'vite/modulepreload-polyfill'
+
 export const colorClass = 'text-black'
 
 export function colorHeading() {

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

@@ -5,7 +5,8 @@ import { isModernFlag } from './importAnalysisBuild'
 export const modulePreloadPolyfillId = 'vite/modulepreload-polyfill'
 
 export function modulePreloadPolyfillPlugin(config: ResolvedConfig): Plugin {
-  const skip = config.build.ssr
+  // `isModernFlag` is only available during build since it is resolved by `vite:build-import-analysis`
+  const skip = config.command !== 'build' || config.build.ssr
   let polyfillString: string | undefined
 
   return {

scripts/jestPerTestSetup.ts

@@ -24,6 +24,7 @@ declare global {
   const page: Page | undefined
 
   const browserLogs: string[]
+  const browserErrors: Error[]
   const serverLogs: string[]
   const viteTestUrl: string | undefined
   const watcher: RollupWatcher | undefined
@@ -34,6 +35,7 @@ declare const global: {
   page?: Page
 
   browserLogs: string[]
+  browserErrors: Error[]
   serverLogs: string[]
   viteTestUrl?: string
   watcher?: RollupWatcher
@@ -56,13 +58,19 @@ const onConsole = (msg: ConsoleMessage) => {
   logs.push(msg.text())
 }
 
+const errors: Error[] = (global.browserErrors = [])
+const onPageError = (error: Error) => {
+  errors.push(error)
+}
+
 beforeAll(async () => {
   const page = global.page
   if (!page) {
     return
   }
   try {
     page.on('console', onConsole)
+    page.on('pageerror', onPageError)
 
     const testPath = expect.getState().testPath
     const testName = slash(testPath).match(/playground\/([\w-]+)\//)?.[1]