fix: move MSW setup to --require preload for v2 compatibility

MSW v2 interceptors break when bundled by esbuild (Remix server build).
Move MSW setup from entry.server.tsx to a --require preload script
(mocks/setup.cjs) that runs before Remix boots, ensuring fetch
interception works correctly for e2e tests.

Author: wheeljackz

app/entry.server.tsx

@@ -2,12 +2,9 @@ import type { EntryContext } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
 import { renderToString } from 'react-dom/server'
 
-// Start MSW mock server in E2E mode to intercept external API calls
-if (process.env.RUNNING_E2E === 'true') {
-  // Dynamic import to avoid bundling MSW in production
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  require('../mocks/server').startMockServer()
-}
+// MSW mock server for E2E tests is loaded via --require preload (mocks/setup.cjs)
+// to ensure interceptors are installed before the Remix server boots.
+// See start:e2e script in package.json.
 
 export default function handleRequest(
   request: Request,

mocks/setup.cjs

@@ -0,0 +1,59 @@
+/**
+ * MSW v2 preload script for E2E tests.
+ *
+ * MSW v2 interceptors must run as native Node modules — they break when
+ * bundled by esbuild (Remix server build). Loading via --require ensures
+ * interceptors are installed before the Remix server boots.
+ */
+if (process.env.RUNNING_E2E === 'true') {
+  const { setupServer } = require('msw/node')
+  const { http, HttpResponse } = require('msw')
+  const fs = require('fs')
+  const path = require('path')
+
+  const MAGIC_LINK_FIXTURE_PATH = path.join(
+    __dirname,
+    '../e2e/fixtures/magic.local.json'
+  )
+
+  function extractMagicLink(html) {
+    const match = html.match(/href="([^"]*magic[^"]*)"/)
+    return match ? match[1] : null
+  }
+
+  const server = setupServer(
+    http.post(
+      'https://api.mailgun.net/v3/:domain/messages',
+      async ({ request, params }) => {
+        const body = Object.fromEntries(
+          new URLSearchParams(await request.text())
+        )
+        console.info('🔶 MSW intercepted email request:', {
+          to: body.to,
+          subject: body.subject,
+        })
+
+        if (body.html) {
+          const magicLink = extractMagicLink(body.html)
+          if (magicLink) {
+            console.info('🔶 Captured magic link:', magicLink)
+            fs.writeFileSync(
+              MAGIC_LINK_FIXTURE_PATH,
+              JSON.stringify({ magicLink }, null, 2)
+            )
+          }
+        }
+
+        const randomId = '20210321210543.1.E01B8B612C44B41B'
+        const id = `<${randomId}>@${String(params.domain)}`
+        return HttpResponse.json({ id, message: 'Queued. Thank you.' })
+      }
+    )
+  )
+
+  server.listen({ onUnhandledRequest: 'warn' })
+  console.info('🔶 MSW mock server installed (via --require preload)')
+
+  process.once('SIGINT', () => server.close())
+  process.once('SIGTERM', () => server.close())
+}

package.json

@@ -20,12 +20,12 @@
     "prepare": "husky install",
     "start": "remix-serve build",
     "prestart:e2e": "DATABASE_URL=file:./test.db prisma migrate reset --force && npm run build:css",
-    "start:e2e": "cross-env RUNNING_E2E=true DATABASE_URL=file:./test.db remix dev",
+    "start:e2e": "cross-env RUNNING_E2E=true DATABASE_URL=file:./test.db NODE_OPTIONS='--require ./mocks/setup.cjs' remix dev",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "test:e2e": "playwright test",
-    "test:e2e:dev": "cross-env RUNNING_E2E=true start-server-and-test dev http-get://localhost:3000/ test:e2e",
+    "test:e2e:dev": "cross-env RUNNING_E2E=true NODE_OPTIONS='--require ./mocks/setup.cjs' start-server-and-test dev http-get://localhost:3000/ test:e2e",
     "test:e2e:run": "cross-env RUNNING_E2E=true DATABASE_URL=file:./test.db start-server-and-test start:e2e http-get://localhost:3000/ test:e2e",
     "test:e2e:docker": "playwright test --config=playwright.docker.config.ts",
     "test:e2e:staging": "playwright test --config=playwright.staging.config.ts",