diff --git a/npm/vite-dev-server/cypress/components/vue/Hello/Hello.spec.js b/npm/vite-dev-server/cypress/components/vue/Hello/Hello.spec.js
index 6c5b880fec1a..518a47ede120 100644
--- a/npm/vite-dev-server/cypress/components/vue/Hello/Hello.spec.js
+++ b/npm/vite-dev-server/cypress/components/vue/Hello/Hello.spec.js
@@ -4,7 +4,7 @@ import Hello from './Hello.vue'
 
 describe('Hello', () => {
   it('shows error for short text', () => {
-    cy.viewport(300, 200)
+    cy.viewport(500, 800)
     mount(Hello)
     // use the component like a real user
     cy.findByRole('textbox').type('abc')
diff --git a/npm/vite-dev-server/cypress/components/vue/Hello/Hello.vue b/npm/vite-dev-server/cypress/components/vue/Hello/Hello.vue
index 997d288746ee..9aa1930da917 100644
--- a/npm/vite-dev-server/cypress/components/vue/Hello/Hello.vue
+++ b/npm/vite-dev-server/cypress/components/vue/Hello/Hello.vue
@@ -3,12 +3,16 @@
     <input v-model="username" />
     <div v-if="error" class="error">{{ error }}</div>
     <img src="./logo.png" />
+    <Card/>
   </div>
 </template>
 
 <script>
+import Card from "../Card/Card.vue"
+
 export default {
   name: "Hello",
+  components: { Card },
   data() {
     return {
       username: "",
diff --git a/npm/vite-dev-server/src/makeCypressPlugin.ts b/npm/vite-dev-server/src/makeCypressPlugin.ts
index de369b018b6e..4794f40879ab 100644
--- a/npm/vite-dev-server/src/makeCypressPlugin.ts
+++ b/npm/vite-dev-server/src/makeCypressPlugin.ts
@@ -34,8 +34,8 @@ interface Spec{
 
 export const makeCypressPlugin = (
   projectRoot: string,
-  supportFilePath: string,
-  devServerEvents: EventEmitter,
+  supportFilePath: string | false,
+  devServerEvents: NodeJS.EventEmitter,
   specs: Spec[],
 ): Plugin => {
   let base = '/'
@@ -93,8 +93,10 @@ export const makeCypressPlugin = (
       let moduleImporters = server.moduleGraph.fileToModulesMap.get(file)
       let iterationNumber = 0
 
+      const exploredFiles = new Set<string>()
+
       // until we reached a point where the current module is imported by no other
-      while (moduleImporters && moduleImporters.size) {
+      while (moduleImporters?.size) {
         if (iterationNumber > HMR_DEPENDENCY_LOOKUP_MAX_ITERATION) {
           debug(`max hmr iteration reached: ${HMR_DEPENDENCY_LOOKUP_MAX_ITERATION}; Rerun will not happen on this file change.`)
 
@@ -108,19 +110,27 @@ export const makeCypressPlugin = (
             debug('handleHotUpdate - support compile success')
             devServerEvents.emit('dev-server:compile:success')
 
+            // if we update support we know we have to re-run it all
+            // no need to ckeck further
             return []
           }
 
           if (mod.file && specsPathsSet.has(mod.file)) {
             debug('handleHotUpdate - spec compile success', mod.file)
             devServerEvents.emit('dev-server:compile:success', { specFile: mod.file })
+            // if we find one spec, does not mean we are done yet,
+            // there could be other spec files to re-run
+            // see https://github.com/cypress-io/cypress/issues/17691
+          }
 
-            return []
+          // to avoid circular updates, keep track of what we updated
+          if (mod.file) {
+            exploredFiles.add(mod.file)
           }
         }
 
         // get all the modules that import the current one
-        moduleImporters = getImporters(moduleImporters)
+        moduleImporters = getImporters(moduleImporters, exploredFiles)
         iterationNumber += 1
       }
 
@@ -129,11 +139,13 @@ export const makeCypressPlugin = (
   }
 }
 
-function getImporters (modules: Set<ModuleNode>): Set<ModuleNode> {
+function getImporters (modules: Set<ModuleNode>, alreadyExploredFiles: Set<string>): Set<ModuleNode> {
   const allImporters = new Set<ModuleNode>()
 
   modules.forEach((m) => {
-    m.importers.forEach((imp) => allImporters.add(imp))
+    if (m.file && !alreadyExploredFiles.has(m.file)) {
+      m.importers.forEach((imp) => allImporters.add(imp))
+    }
   })
 
   return allImporters
diff --git a/npm/vite-dev-server/src/startServer.ts b/npm/vite-dev-server/src/startServer.ts
index b643cd482237..7134e21c0077 100644
--- a/npm/vite-dev-server/src/startServer.ts
+++ b/npm/vite-dev-server/src/startServer.ts
@@ -6,18 +6,11 @@ import { makeCypressPlugin } from './makeCypressPlugin'
 
 const debug = Debug('cypress:vite-dev-server:start')
 
-interface Options {
-  specs: Cypress.Cypress['spec'][]
-  config: Record<string, string>
-  devServerEvents: EventEmitter
-  [key: string]: unknown
-}
-
 export interface StartDevServerOptions {
   /**
    * the Cypress options object
    */
-  options: Options
+  options: Cypress.DevServerOptions
   /**
    * By default, vite will use your vite.config file to
    * Start the server. If you need additional plugins or