fix: improve resolveClient for DEV

e2e/fixtures/ssr-catch-error/src/pages/index.tsx

@@ -1,10 +1,14 @@
+import { ErrorBoundary } from 'react-error-boundary';
 import { Link } from 'waku';
 
 export default async function HomePage() {
   return (
     <div>
       <p>Home Page</p>
       <Link to="/invalid">Invalid page</Link>
+      <ErrorBoundary fallback={<div>Something went wrong</div>}>
+        Empty children
+      </ErrorBoundary>
     </div>
   );
 }

e2e/fixtures/ssr-catch-error/vite.config.ts

@@ -0,0 +1,22 @@
+export default ({ mode }: { mode: string }) => {
+  if (mode === 'development') {
+    return {
+      plugins: [
+        {
+          name: 'externalize-react-error-boundary',
+          configResolved(config: any) {
+            // TODO HACK temporary solution until v0.22.0
+            if (
+              config.cacheDir.endsWith(
+                'node_modules/.vite/waku-dev-server-main',
+              )
+            ) {
+              config.ssr.noExternal = ['react-error-boundary'];
+            }
+          },
+        },
+      ],
+    };
+  }
+  return {};
+};

e2e/fixtures/ssr-catch-error/waku.config.ts

@@ -1,10 +1,11 @@
 /** @type {import('waku/config').Config} */
 export default {
   middleware: () => [
+    import('waku/middleware/context'),
     import('waku/middleware/dev-server'),
     import('./src/middleware/validator.js'),
     import('waku/middleware/rsc'),
-    import('waku/middleware/fallback'),
+    import('waku/middleware/ssr'),
   ],
   /**
    * Base path for HTTP requests to indicate RSC requests.

e2e/ssr-catch-error.spec.ts

@@ -1,69 +1,86 @@
 import { expect } from '@playwright/test';
-import { execSync, exec, ChildProcess } from 'node:child_process';
+import { execSync, exec } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
+import { cp, mkdtemp } from 'node:fs/promises';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { createRequire } from 'node:module';
 import waitPort from 'wait-port';
-import { debugChildProcess, getFreePort, terminate, test } from './utils.js';
-import { rm } from 'node:fs/promises';
-
-const waku = fileURLToPath(
-  new URL('../packages/waku/dist/cli.js', import.meta.url),
-);
 
-const commands = [
-  {
-    command: 'dev',
-  },
-  {
-    build: 'build',
-    command: 'start',
-  },
-];
+import { debugChildProcess, getFreePort, terminate, test } from './utils.js';
 
-const cwd = fileURLToPath(
+let standaloneDir: string;
+const fixtureDir = fileURLToPath(
   new URL('./fixtures/ssr-catch-error', import.meta.url),
 );
+const wakuDir = fileURLToPath(new URL('../packages/waku', import.meta.url));
+const { version } = createRequire(import.meta.url)(
+  join(wakuDir, 'package.json'),
+);
+
+async function run(isDev: boolean) {
+  const port = await getFreePort();
+  const cp = isDev
+    ? exec(
+        `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} dev --port ${port}`,
+        { cwd: standaloneDir },
+      )
+    : exec(
+        `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} build && node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} start --port ${port}`,
+        { cwd: standaloneDir },
+      );
+  debugChildProcess(cp, fileURLToPath(import.meta.url), [
+    /ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time/,
+  ]);
+  await waitPort({ port });
+  return [port, cp.pid];
+}
 
-for (const { build, command } of commands) {
-  test.describe(`ssr-catch-error: ${command}`, () => {
-    let cp: ChildProcess;
-    let port: number;
-    test.beforeAll('remove cache', async () => {
-      await rm(`${cwd}/dist`, {
+for (const isDev of [true, false]) {
+  test.describe(`ssr-catch-error: ${isDev ? 'DEV' : 'PRD'}`, () => {
+    test.beforeEach(async () => {
+      // GitHub Action on Windows doesn't support mkdtemp on global temp dir,
+      // Which will cause files in `src` folder to be empty.
+      // I don't know why
+      const tmpDir = process.env.TEMP_DIR ? process.env.TEMP_DIR : tmpdir();
+      standaloneDir = await mkdtemp(join(tmpDir, 'waku-ssr-catch-error-'));
+      await cp(fixtureDir, standaloneDir, {
+        filter: (src) => {
+          return !src.includes('node_modules') && !src.includes('dist');
+        },
         recursive: true,
-        force: true,
       });
-    });
-
-    test.beforeAll(async () => {
-      if (build) {
-        execSync(`node ${waku} ${build}`, { cwd });
-      }
-      port = await getFreePort();
-      cp = exec(`node ${waku} ${command} --port ${port}`, { cwd });
-      debugChildProcess(cp, fileURLToPath(import.meta.url), [
-        /ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time/,
-      ]);
-      await waitPort({ port });
-    });
-
-    test.afterAll(async () => {
-      await terminate(cp.pid!);
+      execSync(`pnpm pack --pack-destination ${standaloneDir}`, {
+        cwd: wakuDir,
+        stdio: 'inherit',
+      });
+      const name = `waku-${version}.tgz`;
+      execSync(`npm install --force ${join(standaloneDir, name)}`, {
+        cwd: standaloneDir,
+        stdio: 'inherit',
+      });
     });
 
     test('access top page', async ({ page }) => {
+      const [port, pid] = await run(isDev);
       await page.goto(`http://localhost:${port}/`);
       await expect(page.getByText('Home Page')).toBeVisible();
+      await terminate(pid!);
     });
 
     test('access invalid page through client router', async ({ page }) => {
+      const [port, pid] = await run(isDev);
       await page.goto(`http://localhost:${port}/`);
       await page.getByText('Invalid page').click();
       await expect(page.getByText('401')).toBeVisible();
+      await terminate(pid!);
     });
 
     test('access invalid page directly', async ({ page }) => {
+      const [port, pid] = await run(isDev);
       await page.goto(`http://localhost:${port}/invalid`);
       await expect(page.getByText('Unauthorized')).toBeVisible();
+      await terminate(pid!);
     });
   });
 }

packages/waku/src/lib/middleware/dev-server-impl.ts

@@ -10,8 +10,6 @@ import { SRC_MAIN, SRC_ENTRIES } from '../constants.js';
 import {
   joinPath,
   fileURLToFilePath,
-  encodeFilePathToAbsolute,
-  decodeFilePathFromAbsolute,
   filePathToFileURL,
 } from '../utils/path.js';
 import { patchReactRefresh } from '../plugins/patch-react-refresh.js';
@@ -133,21 +131,29 @@ const createMainViteServer = (
     return vite;
   });
 
+  const wakuDist = joinPath(fileURLToFilePath(import.meta.url), '../../..');
+
   const loadServerModuleMain = async (idOrFileURL: string) => {
-    const vite = await vitePromise;
-    if (idOrFileURL === 'waku' || idOrFileURL.startsWith('waku/')) {
+    let file = idOrFileURL.startsWith('file://')
+      ? fileURLToFilePath(idOrFileURL)
+      : idOrFileURL;
+    if (file.startsWith(wakuDist)) {
+      file = 'waku' + file.slice(wakuDist.length).replace(/\.\w+$/, '');
+    }
+    if (file === 'waku' || file.startsWith('waku/')) {
       // HACK `external: ['waku']` doesn't do the same
       return import(/* @vite-ignore */ idOrFileURL);
     }
+    const vite = await vitePromise;
     if (
       idOrFileURL.startsWith('file://') &&
       idOrFileURL.includes('/node_modules/')
     ) {
       // HACK node_modules should be externalized
-      const file = fileURLToFilePath(idOrFileURL);
-      const fileWithAbsolutePath = file.startsWith('/')
-        ? file
-        : joinPath(vite.config.root, file);
+      const filePath = fileURLToFilePath(idOrFileURL.split('?')[0]!);
+      const fileWithAbsolutePath = filePath.startsWith('/')
+        ? filePath
+        : joinPath(vite.config.root, filePath);
       return import(/* @vite-ignore */ filePathToFileURL(fileWithAbsolutePath));
     }
     return vite.ssrLoadModule(
@@ -286,18 +292,24 @@ const createRscViteServer = (
     config: { rootDir: string; basePath: string },
     initialModules: ClonableModuleNode[],
   ) => {
-    let file = id.startsWith('file://')
-      ? decodeFilePathFromAbsolute(fileURLToFilePath(id))
-      : id;
+    let file = id;
+    const isAtFsFile = file.startsWith('/@fs/');
+    if (isAtFsFile) {
+      file = file.slice('/@fs'.length);
+    }
     for (const moduleNode of initialModules) {
       if (moduleNode.file === file) {
         return moduleNode.url;
       }
     }
     if (file.startsWith(config.rootDir)) {
       file = file.slice(config.rootDir.length + 1); // '+ 1' to remove '/'
+    } else if (isAtFsFile) {
+      file = '@fs' + file;
+    } else if (file.startsWith('/')) {
+      file = file.slice(1);
     } else {
-      file = '@fs' + encodeFilePathToAbsolute(file);
+      file = '@id/' + file;
     }
     return config.basePath + file;
   };