fix: add a timeout to the res.sep when discovering new dependency

packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts

@@ -1,12 +1,5 @@
 import { untilUpdated } from '../../testUtils'
 
-test('should load dynamic import with vars', async () => {
-  await page.click('.foo')
-  await untilUpdated(() => page.textContent('.view'), 'Foo view')
-  await page.click('.bar')
-  await untilUpdated(() => page.textContent('.view'), 'Bar view')
-})
-
 test('should load literal dynamic import', async () => {
   await page.click('.baz')
   await untilUpdated(() => page.textContent('.view'), 'Baz view')
@@ -16,3 +9,21 @@ test('should load full dynamic import from public', async () => {
   await page.click('.qux')
   await untilUpdated(() => page.textContent('.view'), 'Qux view')
 })
+
+// since this test has a timeout, it should be put last so that it
+// does not bleed on the last
+test('should load dynamic import with vars', async () => {
+  await page.click('.foo')
+  await untilUpdated(() => page.textContent('.view'), 'Foo view')
+
+  // first page click will not load the remote message
+  // because vite needs to compile the lodash dependency
+  await page.click('.bar')
+  await untilUpdated(() => page.textContent('.view'), '')
+
+  // wait until reload and click again
+  setTimeout(async () => {
+    await page.click('.bar')
+    await untilUpdated(() => page.textContent('.view'), 'Bar view')
+  }, 10)
+})

packages/playground/dynamic-import/package.json

@@ -7,5 +7,8 @@
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
     "serve": "vite preview"
+  },
+  "dependencies": {
+    "lodash": "4.17.21"
   }
 }

packages/playground/dynamic-import/views/bar.js

@@ -1,4 +1,5 @@
 import { n } from '../nested/shared'
-console.log('bar' + n)
+import { isBoolean } from 'lodash'
+console.log('bar' + isBoolean(n))
 
 export const msg = 'Bar view'

packages/vite/src/node/server/middlewares/transform.ts

@@ -23,6 +23,12 @@ import {
 } from '../../constants'
 import { isCSSRequest, isDirectCSSRequest } from '../../plugins/css'
 
+/**
+ * Time (ms) Vite has to full-reload the page before returning
+ * an empty response.
+ */
+const NEW_DEPENDENCY_BUILD_TIMEOUT = 5000
+
 const debugCache = createDebugger('vite:cache')
 const isDebug = !!process.env.DEBUG
 
@@ -48,7 +54,19 @@ export function transformMiddleware(
       !req.url?.includes('vite/dist/client')
     ) {
       // missing dep pending reload, hold request until reload happens
-      server._pendingReload.then(() => res.end())
+      server._pendingReload.then(() =>
+        // If the refresh has not happened after timeout, Vite considers
+        // something unexpected has happened. In this case, Vite
+        // returns an empty response that will error.
+        setTimeout(() => {
+          // status code request timeout
+          res.statusCode = 408
+          res.end(
+            `<h1>[vite] Something unexpected happened while optimizing "${req.url}"<h1>` +
+              `<p>The current page should have reloaded by now</p>`
+          )
+        }, NEW_DEPENDENCY_BUILD_TIMEOUT)
+      )
       return
     }
 

yarn.lock

@@ -5039,7 +5039,7 @@ lodash@4.17.19:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
-lodash@4.x, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@~4.17.15:
+lodash@4.17.21, lodash@4.x, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@~4.17.15:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==