From 3abe63503c5fddcda9648e7cde6394d005b25194 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Wed, 22 Mar 2023 16:06:02 -0600
Subject: [PATCH 1/7] test retrying dynamic module imports for Vite support
 file and spec files - build binary to test in CI in another project

---
 .circleci/workflows.yml                       |  6 +--
 .../client/initCypressTests.js                | 39 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/.circleci/workflows.yml b/.circleci/workflows.yml
index dd0f2f7a234f..b5cf224fd9f6 100644
--- a/.circleci/workflows.yml
+++ b/.circleci/workflows.yml
@@ -30,7 +30,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'emily/before-spec-promise'
+        - 'retry-dynamic-imports'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -41,7 +41,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'emily/before-spec-promise', << pipeline.git.branch >> ]
+    - equal: [ 'retry-dynamic-imports', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -139,7 +139,7 @@ commands:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "emily/before-spec-promise" && "$CIRCLE_BRANCH" != "update-v8-snapshot-cache-on-develop" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "retry-dynamic-imports" && "$CIRCLE_BRANCH" != "update-v8-snapshot-cache-on-develop" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi
diff --git a/npm/vite-dev-server/client/initCypressTests.js b/npm/vite-dev-server/client/initCypressTests.js
index f0602c119eb3..7e24df630023 100644
--- a/npm/vite-dev-server/client/initCypressTests.js
+++ b/npm/vite-dev-server/client/initCypressTests.js
@@ -1,6 +1,41 @@
 // This file is merged in a <script type=module> into index.html
 // it will be used to load and kick start the selected spec
 
+// Fetch a dynamic import and re-try 3 times with a 2-second back-off
+async function importWithRetry (importFn) {
+  const isTextTerminal = CypressInstance.config('isTextTerminal')
+
+  try {
+    return await importFn()
+  } catch (error) {
+    if (isTextTerminal) {
+      for (let i = 0; i < 3; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 1000 * 2 ** i))
+
+        let url
+
+        try {
+          // Get request URL from error message from original import
+          url = new URL(
+            error.message
+            .replace('Failed to fetch dynamically imported module: ', '')
+            .trim(),
+          )
+
+          // add a timestamp to the end of the URL to force re-load the module instead of using the cache
+          url.searchParams.set('t', `${+new Date()}`)
+
+          return await import(url.href)
+        } catch (e) {
+          console.log(`retrying import of ${url?.href}`)
+        }
+      }
+    }
+
+    throw error
+  }
+}
+
 const CypressInstance = window.Cypress = parent.Cypress
 
 const importsToLoad = []
@@ -25,7 +60,7 @@ if (supportFile) {
   // We need a slash before /cypress/supportFile.js, this happens by default
   // with the current string replacement logic.
   importsToLoad.push({
-    load: () => import(`${devServerPublicPathRoute}${supportRelativeToProjectRoot}`),
+    load: () => importWithRetry(() => import(`${devServerPublicPathRoute}${supportRelativeToProjectRoot}`)),
     absolute: supportFile,
     relative: supportRelativeToProjectRoot,
     relativeUrl: `${devServerPublicPathRoute}${supportRelativeToProjectRoot}`,
@@ -41,7 +76,7 @@ const testFileAbsolutePathRoute = `${devServerPublicPathRoute}/@fs/${normalizedA
 /* Spec file import logic */
 // We need a slash before /src/my-spec.js, this does not happen by default.
 importsToLoad.push({
-  load: () => import(testFileAbsolutePathRoute),
+  load: () => importWithRetry(() => import(testFileAbsolutePathRoute)),
   absolute: CypressInstance.spec.absolute,
   relative: CypressInstance.spec.relative,
   relativeUrl: testFileAbsolutePathRoute,

From a478d7dcec50ced4b6830b6daeb84e410d543dbc Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Wed, 22 Mar 2023 16:06:34 -0600
Subject: [PATCH 2/7] [run ci]


From 6cecebcec7f27974f15221c364e70d71df2d69e9 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Thu, 23 Mar 2023 07:53:40 -0600
Subject: [PATCH 3/7] use console.error so we can see in the debug logs; add
 test

---
 .../client/initCypressTests.js                | 42 +++++++++----------
 .../cypress/e2e/vite-dev-server.cy.ts         | 15 +++++++
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/npm/vite-dev-server/client/initCypressTests.js b/npm/vite-dev-server/client/initCypressTests.js
index 7e24df630023..fc02c555adb2 100644
--- a/npm/vite-dev-server/client/initCypressTests.js
+++ b/npm/vite-dev-server/client/initCypressTests.js
@@ -3,32 +3,28 @@
 
 // Fetch a dynamic import and re-try 3 times with a 2-second back-off
 async function importWithRetry (importFn) {
-  const isTextTerminal = CypressInstance.config('isTextTerminal')
-
   try {
     return await importFn()
   } catch (error) {
-    if (isTextTerminal) {
-      for (let i = 0; i < 3; i++) {
-        await new Promise((resolve) => setTimeout(resolve, 1000 * 2 ** i))
-
-        let url
-
-        try {
-          // Get request URL from error message from original import
-          url = new URL(
-            error.message
-            .replace('Failed to fetch dynamically imported module: ', '')
-            .trim(),
-          )
-
-          // add a timestamp to the end of the URL to force re-load the module instead of using the cache
-          url.searchParams.set('t', `${+new Date()}`)
-
-          return await import(url.href)
-        } catch (e) {
-          console.log(`retrying import of ${url?.href}`)
-        }
+    for (let i = 0; i < 3; i++) {
+      await new Promise((resolve) => setTimeout(resolve, 1000 * 2 ** i))
+
+      let url
+
+      try {
+        // Get request URL from error message from original import
+        url = new URL(
+          error.message
+          .replace('Failed to fetch dynamically imported module: ', '')
+          .trim(),
+        )
+
+        // add a timestamp to the end of the URL to force re-load the module instead of using the cache
+        url.searchParams.set('t', `${+new Date()}`)
+
+        return await import(url.href)
+      } catch (e) {
+        console.error(`retrying import of ${url?.href}`)
       }
     }
 
diff --git a/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts b/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts
index b20700e7bdd3..8e8be4898a55 100644
--- a/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts
+++ b/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts
@@ -115,6 +115,21 @@ describe('Config options', () => {
       expect(verifyFile).to.eq('OK')
     })
   })
+
+  it('retries importing support file if the import errors', () => {
+    cy.intercept('**/cypress/support/component.js', {
+      statusCode: 404,
+    })
+
+    cy.scaffoldProject('vite2.9.1-react')
+    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite.config.ts'])
+    cy.startAppServer('component')
+
+    cy.visitApp()
+    cy.contains('App.cy.jsx').click()
+    cy.waitForSpecToFinish()
+    cy.get('.passed > .num').should('contain', 2)
+  })
 })
 
 describe('sourcemaps', () => {

From 240a4c00b39a46b6e06e108d2adc4798391faf84 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Thu, 23 Mar 2023 07:54:07 -0600
Subject: [PATCH 4/7] [run ci]


From 164ef2e5082dbe1b7cb3204dfbdfcde9af63b939 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Thu, 23 Mar 2023 08:14:18 -0600
Subject: [PATCH 5/7] log on the first retry so that we know it happened [run
 ci]

---
 npm/vite-dev-server/client/initCypressTests.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/npm/vite-dev-server/client/initCypressTests.js b/npm/vite-dev-server/client/initCypressTests.js
index fc02c555adb2..052a2814bd98 100644
--- a/npm/vite-dev-server/client/initCypressTests.js
+++ b/npm/vite-dev-server/client/initCypressTests.js
@@ -19,6 +19,8 @@ async function importWithRetry (importFn) {
           .trim(),
         )
 
+        console.error(`retrying import of ${url?.href}`)
+
         // add a timestamp to the end of the URL to force re-load the module instead of using the cache
         url.searchParams.set('t', `${+new Date()}`)
 

From ed984ef8e1558e8915171384987494bc17b00e27 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Thu, 23 Mar 2023 09:26:41 -0600
Subject: [PATCH 6/7] try building binaries again [run ci]


From 243502ae98b750e429789d373dd7175f487a62ee Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Fri, 24 Mar 2023 09:23:23 -0700
Subject: [PATCH 7/7] add comment and changelog entry

---
 cli/CHANGELOG.md                               | 1 +
 npm/vite-dev-server/client/initCypressTests.js | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index e33926623de0..f54680136e61 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -7,6 +7,7 @@ _Released 03/28/2023 (PENDING)_
 
  - Fixed a compatibility issue so that component test projects can use [Vite](https://vitejs.dev/) version 4.2.0 and greater. Fixes [#26138](https://github.com/cypress-io/cypress/issues/26138).
  - Changed the way that Git hashes are loaded so that non-relevant runs are excluded from the Debug page. Fixes [#26058](https://github.com/cypress-io/cypress/issues/26058).
+ - Fixed an issue where Vite component tests sometimes fail in CI due to not being able to dynamically import the component support or spec modules. Fixes [#25913](https://github.com/cypress-io/cypress/issues/25913).
 
 **Misc:**
 
diff --git a/npm/vite-dev-server/client/initCypressTests.js b/npm/vite-dev-server/client/initCypressTests.js
index 052a2814bd98..b32a997c215b 100644
--- a/npm/vite-dev-server/client/initCypressTests.js
+++ b/npm/vite-dev-server/client/initCypressTests.js
@@ -1,7 +1,10 @@
 // This file is merged in a <script type=module> into index.html
 // it will be used to load and kick start the selected spec
 
-// Fetch a dynamic import and re-try 3 times with a 2-second back-off
+// Fetch a dynamic import and re-try 3 times with a 2-second back-off.
+// We want to re-try these if they fail because sometimes (seemingly due to network issues)
+// the modules aren't available when we first request them.
+// See https://github.com/cypress-io/cypress/issues/25913
 async function importWithRetry (importFn) {
   try {
     return await importFn()