Fix errors surfaced in e2e smoke tests

Author: webstackdev

astro.config.ts

@@ -197,16 +197,25 @@ export default defineConfig({
        * POST /_actions/webmentions.list with ERR_REQUIRE_ESM in production.
        * Bundle the sanitizer and its parser dependency chain into the ESM
        * server output so no runtime require() of these packages occurs.
+       *
+       * Build-only: in the dev server, Vite's SSR module runner evaluates
+       * noExternal'd CommonJS packages as ESM, crashing the same action with
+       * "ReferenceError: require is not defined". When the chain is
+       * externalized in dev, Node 24 loads it natively (require of ESM is
+       * supported), so the bundling is only needed for build output.
        */
-      noExternal: [
-        'sanitize-html',
-        'htmlparser2',
-        'dom-serializer',
-        'domelementtype',
-        'domhandler',
-        'domutils',
-        'entities',
-      ],
+      noExternal:
+        process.env['NODE_ENV'] === 'production'
+          ? [
+              'sanitize-html',
+              'htmlparser2',
+              'dom-serializer',
+              'domelementtype',
+              'domhandler',
+              'domutils',
+              'entities',
+            ]
+          : [],
     },
     /**
      * Astro 6 reads `environments.client.build.sourcemap` for client bundles

test/e2e/helpers/consoleErrors.ts

@@ -31,7 +31,7 @@ export function setupConsoleErrorChecker(page: Page): ConsoleErrorChecker {
   const failed404s: string[] = []
 
   // Capture 404 responses with full details
-  page.on('response', (response) => {
+  page.on('response', response => {
     if (response.status() === 404) {
       const url = response.url()
       const requestType = response.request().resourceType()
@@ -40,7 +40,7 @@ export function setupConsoleErrorChecker(page: Page): ConsoleErrorChecker {
   })
 
   // Capture ALL console messages of type error
-  page.on('console', (msg) => {
+  page.on('console', msg => {
     if (msg.type() === 'error') {
       const text = msg.text()
       const location = msg.location()
@@ -52,7 +52,7 @@ export function setupConsoleErrorChecker(page: Page): ConsoleErrorChecker {
   })
 
   // Also capture page errors (uncaught exceptions)
-  page.on('pageerror', (error) => {
+  page.on('pageerror', error => {
     consoleErrors.push(`Uncaught: ${error.message}\n${error.stack}`)
   })
 
@@ -62,26 +62,35 @@ export function setupConsoleErrorChecker(page: Page): ConsoleErrorChecker {
     // Filter out ONLY known acceptable issues - computed lazily
     getFilteredErrors: () => {
       // Get list of acceptable 404 URLs (strip resource type suffix)
-      const acceptable404Urls = failed404s.filter((url) => {
+      const acceptable404Urls = failed404s.filter(url => {
         const urlWithoutType = url.split(' (')[0]
         return url.includes('favicon.ico') || urlWithoutType?.endsWith('/')
       })
 
-      return consoleErrors.filter((error) => {
+      return consoleErrors.filter(error => {
         // Filter known browser quirks
         if (error.includes('ResizeObserver loop completed')) return false
 
         // Filter Vite dev server 504 errors (Outdated Optimize Dep)
         if (error.includes('504') && error.includes('Outdated Optimize Dep')) return false
 
+        // Filter Vite dev server HMR websocket noise: the Vite client only exists
+        // in dev, and a full reload (e.g. after dependency re-optimization) or a
+        // navigation mid-handshake closes the socket. Firefox surfaces that as an
+        // uncaught error while Chromium silently reconnects.
+        if (error.includes('[vite] failed to connect to websocket')) return false
+        if (error.includes('WebSocket closed without opened') && error.includes('/@vite/client')) {
+          return false
+        }
+
         // Filter generic "Failed to load resource: 404" errors if we have acceptable 404s
         // These console errors don't include the URL, so if we filtered out 404s,
         // we should also filter out the corresponding console errors
         if (
           error.includes('Failed to load resource') &&
           error.includes('404') &&
           acceptable404Urls.length > 0 &&
-          failed404s.every((url) => acceptable404Urls.includes(url))
+          failed404s.every(url => acceptable404Urls.includes(url))
         ) {
           return false
         }
@@ -90,7 +99,7 @@ export function setupConsoleErrorChecker(page: Page): ConsoleErrorChecker {
       })
     },
     getFiltered404s: () =>
-      failed404s.filter((url) => {
+      failed404s.filter(url => {
         // favicon 404s are acceptable in dev
         if (url.includes('favicon.ico')) return false
 
@@ -117,11 +126,11 @@ export function logConsoleErrors(errorChecker: ConsoleErrorChecker): void {
   // Always log what we found for debugging
   if (errorChecker.failed404s.length > 0) {
     console.log('\n🔍 404 Resources:')
-    errorChecker.failed404s.forEach((url) => console.log(`  - ${url}`))
+    errorChecker.failed404s.forEach(url => console.log(`  - ${url}`))
   }
   if (errorChecker.consoleErrors.length > 0) {
     console.log('\n❌ Console Errors:')
-    errorChecker.consoleErrors.forEach((error) => {
+    errorChecker.consoleErrors.forEach(error => {
       // Log full error message for diagnosis
       console.log(`  - ${error}`)
     })