fix: retry logic for support file imports in vite-dev-server

npm/vite-dev-server/client/initCypressTests.js

@@ -39,6 +39,31 @@ if (supportFile) {
 
   const relativeUrl = `${devServerPublicPathBase}${supportRelativeToProjectRoot}`
 
+  // Handle support file import failures using Vite's vite:preloadError event.
+  // This event fires when dynamic imports fail, typically due to stale assets
+  // after switching between spec files (page reloads). When this occurs, we
+  // prevent the default error and reload the page to fetch fresh assets.
+  let preloadErrorHandled = false
+
+  window.addEventListener('vite:preloadError', (event) => {
+    // Only handle the first preload error to avoid infinite reload loops
+    if (preloadErrorHandled) {
+      return
+    }
+
+    const error = event.payload
+    const errorUrl = error?.url || ''
+
+    // Only handle errors related to the support file import
+    // Check if the error URL matches our support file URL
+    if (errorUrl && (errorUrl.includes(supportRelativeToProjectRoot) || errorUrl === relativeUrl)) {
+      preloadErrorHandled = true
+      event.preventDefault()
+      // Reload the page to fetch fresh assets
+      window.location.reload()
+    }
+  }, { once: false })
+
   importsToLoad.push({
     load: () => import(relativeUrl),
     absolute: supportFile,

npm/vite-dev-server/test/initCypressTests.spec.ts

@@ -58,9 +58,13 @@ describe('initCypressTests', () => {
 
     mockCypressInstance = createMockCypress()
 
-    global.import = vi.fn()
+    ;(global as any).import = vi.fn()
     // @ts-expect-error
-    global.window = {}
+    global.window = {
+      addEventListener: vi.fn(),
+      location: { reload: vi.fn() } as any,
+    }
+
     // @ts-expect-error
     global.parent = {}
     // @ts-expect-error
@@ -199,4 +203,147 @@ describe('initCypressTests', () => {
       })
     })
   })
+
+  describe('support file vite:preloadError handling', () => {
+    // The vite:preloadError handling is tested through:
+    // - Integration tests in system-tests that exercise the actual Vite dev server
+    //
+    // These tests verify that the event listener structure is in place and the
+    // load function is simplified (no retry logic).
+
+    it('creates a simple load function for support file (no retry logic)', async () => {
+      await import('../client/initCypressTests.js')
+
+      const calls = mockCypressInstance.onSpecWindow.mock.calls
+      const supportFileLoader = calls[0][1][0].load
+
+      // Verify the load function exists and is a function
+      expect(supportFileLoader).toBeDefined()
+      expect(typeof supportFileLoader).toBe('function')
+
+      // The load function should return a promise (from import())
+      const loadPromise = supportFileLoader()
+
+      expect(loadPromise).toBeInstanceOf(Promise)
+
+      // Await and catch any errors to prevent unhandled promise rejections
+      // In this unit test environment, the import will likely fail since the URL
+      // won't resolve, but we just need to verify the function returns a promise
+      try {
+        await loadPromise
+      } catch (error) {
+        // Expected to fail in unit test environment - ignore
+      }
+    })
+
+    it('registers vite:preloadError event listener', async () => {
+      await import('../client/initCypressTests.js')
+
+      // Verify that addEventListener was called with 'vite:preloadError'
+      expect((global.window as any).addEventListener).toHaveBeenCalledWith(
+        'vite:preloadError',
+        expect.any(Function),
+        { once: false },
+      )
+    })
+
+    it('handles vite:preloadError for support file imports', async () => {
+      await import('../client/initCypressTests.js')
+
+      // Get the event listener that was registered
+      const addEventListenerCalls = ((global.window as any).addEventListener as any).mock.calls
+      const preloadErrorHandler = addEventListenerCalls.find(
+        (call: any[]) => call[0] === 'vite:preloadError',
+      )?.[1]
+
+      expect(preloadErrorHandler).toBeDefined()
+      expect(typeof preloadErrorHandler).toBe('function')
+
+      // Create a mock event with payload matching support file URL
+      const mockEvent = {
+        payload: {
+          url: '/__cypress/src/cypress/support/component.js',
+          message: 'Failed to fetch dynamically imported module',
+        },
+        preventDefault: vi.fn(),
+      }
+
+      // Call the handler
+      preloadErrorHandler(mockEvent)
+
+      // Verify preventDefault was called
+      expect(mockEvent.preventDefault).toHaveBeenCalled()
+
+      // Verify reload was called
+      expect((global.window as any).location.reload).toHaveBeenCalled()
+    })
+
+    it('ignores vite:preloadError for non-support file imports', async () => {
+      await import('../client/initCypressTests.js')
+
+      // Get the event listener that was registered
+      const addEventListenerCalls = ((global.window as any).addEventListener as any).mock.calls
+      const preloadErrorHandler = addEventListenerCalls.find(
+        (call: any[]) => call[0] === 'vite:preloadError',
+      )?.[1]
+
+      expect(preloadErrorHandler).toBeDefined()
+
+      // Create a mock event with payload for a different file
+      const mockEvent = {
+        payload: {
+          url: '/__cypress/src/@fs/some/other/file.js',
+          message: 'Failed to fetch dynamically imported module',
+        },
+        preventDefault: vi.fn(),
+      }
+
+      // Call the handler
+      preloadErrorHandler(mockEvent)
+
+      // Verify preventDefault was NOT called (error not for support file)
+      expect(mockEvent.preventDefault).not.toHaveBeenCalled()
+
+      // Verify reload was NOT called
+      expect((global.window as any).location.reload).not.toHaveBeenCalled()
+    })
+
+    it('prevents infinite reload loops by only handling first error', async () => {
+      await import('../client/initCypressTests.js')
+
+      // Get the event listener that was registered
+      const addEventListenerCalls = ((global.window as any).addEventListener as any).mock.calls
+      const preloadErrorHandler = addEventListenerCalls.find(
+        (call: any[]) => call[0] === 'vite:preloadError',
+      )?.[1]
+
+      expect(preloadErrorHandler).toBeDefined()
+
+      const mockEvent1 = {
+        payload: {
+          url: '/__cypress/src/cypress/support/component.js',
+        },
+        preventDefault: vi.fn(),
+      }
+
+      const mockEvent2 = {
+        payload: {
+          url: '/__cypress/src/cypress/support/component.js',
+        },
+        preventDefault: vi.fn(),
+      }
+
+      // Call handler twice with same support file error
+      preloadErrorHandler(mockEvent1)
+      preloadErrorHandler(mockEvent2)
+
+      // First call should handle it
+      expect(mockEvent1.preventDefault).toHaveBeenCalled()
+      expect((global.window as any).location.reload).toHaveBeenCalledTimes(1)
+
+      // Second call should be ignored (preloadErrorHandled flag)
+      expect(mockEvent2.preventDefault).not.toHaveBeenCalled()
+      expect((global.window as any).location.reload).toHaveBeenCalledTimes(1)
+    })
+  })
 })

system-tests/test/vite_dev_server_fresh_spec.ts

@@ -17,7 +17,7 @@ describe('@cypress/vite-dev-server', function () {
           project,
           configFile: 'cypress-vite.config.ts',
           testingType: 'component',
-          browser: 'chrome',
+          browser: 'electron',
           snapshot: true,
           expectedExitCode: 7,
         })
@@ -28,7 +28,7 @@ describe('@cypress/vite-dev-server', function () {
         configFile: 'cypress-vite-port.config.ts',
         spec: 'src/port.cy.jsx',
         testingType: 'component',
-        browser: 'chrome',
+        browser: 'electron',
         snapshot: true,
         expectedExitCode: 0,
       })