fix: double modules hazard by preferring relative paths

e2e/07_router_standalone.spec.ts

@@ -21,9 +21,7 @@ const { version } = createRequire(import.meta.url)(
 );
 
 async function testRouterExample(page: Page, port: number) {
-  await waitPort({
-    port,
-  });
+  await waitPort({ port });
 
   await page.goto(`https://localhost:${port}`);
   await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible();
@@ -78,9 +76,7 @@ test.describe('07_router standalone', () => {
       const port = await getFreePort();
       const cp = exec(
         `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} start --port ${port}`,
-        {
-          cwd: standaloneDir,
-        },
+        { cwd: standaloneDir },
       );
       debugChildProcess(cp, fileURLToPath(import.meta.url));
       await testRouterExample(page, port);
@@ -92,9 +88,7 @@ test.describe('07_router standalone', () => {
       const port = await getFreePort();
       const cp = exec(
         `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} dev --port ${port}`,
-        {
-          cwd: standaloneDir,
-        },
+        { cwd: standaloneDir },
       );
       debugChildProcess(cp, fileURLToPath(import.meta.url), [
         /WebSocket server error: Port is already in use/,

e2e/examples-smoke.spec.ts

@@ -72,13 +72,9 @@ for (const cwd of examples) {
             });
           }
           port = await getFreePort();
-          cp = exec(`${command} --port ${port}`, {
-            cwd,
-          });
+          cp = exec(`${command} --port ${port}`, { cwd });
           debugChildProcess(cp, fileURLToPath(import.meta.url));
-          await waitPort({
-            port,
-          });
+          await waitPort({ port });
         });
 
         test.afterAll(async () => {
@@ -107,14 +103,10 @@ for (const cwd of examples) {
 
         test.beforeAll(async () => {
           if (build) {
-            execSync(`node ${waku} ${build}`, {
-              cwd,
-            });
+            execSync(`node ${waku} ${build}`, { cwd });
           }
           port = await getFreePort();
-          cp = exec(`node ${waku} ${command} --port ${port}`, {
-            cwd,
-          });
+          cp = exec(`node ${waku} ${command} --port ${port}`, { cwd });
           cp.stdout?.on('data', (data) => {
             info(`${port} stdout: ${data}`);
             console.log(`${port} stdout: `, `${data}`);
@@ -130,9 +122,7 @@ for (const cwd of examples) {
             error(`${port} stderr: ${data}`);
             console.error(`${port} stderr: `, `${data}`);
           });
-          await waitPort({
-            port,
-          });
+          await waitPort({ port });
         });
 
         test.afterAll(async () => {

e2e/fixtures/ssr-context-provider/README.md

@@ -0,0 +1,3 @@
+# SSR Context Provider
+
+To cover https://github.com/dai-shi/waku/issues/631 case

e2e/fixtures/ssr-context-provider/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "ssr-context-provider",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "react": "19.0.0-canary-e3ebcd54b-20240405",
+    "react-dom": "19.0.0-canary-e3ebcd54b-20240405",
+    "react-server-dom-webpack": "19.0.0-canary-e3ebcd54b-20240405",
+    "waku": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.74",
+    "@types/react-dom": "18.2.24",
+    "typescript": "5.4.4"
+  }
+}

e2e/fixtures/ssr-context-provider/src/components/app.tsx

@@ -0,0 +1,12 @@
+import { ContextProvider } from './context-provider.js';
+import { ContextConsumer } from './context-consumer.js';
+
+export default function App() {
+  return (
+    <div>
+      <ContextProvider>
+        <ContextConsumer />
+      </ContextProvider>
+    </div>
+  );
+}

e2e/fixtures/ssr-context-provider/src/components/context-consumer.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useContext, useEffect, useState } from 'react';
+
+import { Context } from './context-provider.js';
+
+export const ContextConsumer = () => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const value = useContext(Context);
+  return (
+    <>
+      {mounted && <div data-testid="mounted">true</div>}
+      <div data-testid="value">{value}</div>;
+    </>
+  );
+};

e2e/fixtures/ssr-context-provider/src/components/context-provider.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { createContext } from 'react';
+import type { ReactNode } from 'react';
+
+export const Context = createContext('original');
+
+export const ContextProvider = ({ children }: { children: ReactNode }) => {
+  return <Context.Provider value="provider value">{children}</Context.Provider>;
+};

e2e/fixtures/ssr-context-provider/src/entries.tsx

@@ -0,0 +1,29 @@
+/// <reference types="react/experimental" />
+
+import { defineEntries } from 'waku/server';
+import { Slot } from 'waku/client';
+
+import App from './components/app.js';
+
+export default defineEntries(
+  // renderEntries
+  async () => {
+    return {
+      App: <App />,
+    };
+  },
+  // getBuildConfig
+  async () => [{ pathname: '/', entries: [{ input: '' }] }],
+  // getSsrConfig
+  async (pathname) => {
+    switch (pathname) {
+      case '/':
+        return {
+          input: '',
+          body: <Slot id="App" />,
+        };
+      default:
+        return null;
+    }
+  },
+);

e2e/fixtures/ssr-context-provider/src/main.tsx

@@ -0,0 +1,17 @@
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { Root, Slot } from 'waku/client';
+
+const rootElement = (
+  <StrictMode>
+    <Root>
+      <Slot id="App" />
+    </Root>
+  </StrictMode>
+);
+
+if (document.body.dataset.hydrate) {
+  hydrateRoot(document.body, rootElement);
+} else {
+  createRoot(document.body).render(rootElement);
+}

e2e/fixtures/ssr-context-provider/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx",
+    "rootDir": "./src",
+    "outDir": "./dist"
+  }
+}

e2e/rsc-basic.spec.ts

@@ -34,18 +34,12 @@ for (const { build, command } of commands) {
 
     test.beforeAll(async () => {
       if (build) {
-        execSync(`node ${waku} ${build}`, {
-          cwd,
-        });
+        execSync(`node ${waku} ${build}`, { cwd });
       }
       port = await getFreePort();
-      cp = exec(`node ${waku} ${command} --port ${port}`, {
-        cwd,
-      });
+      cp = exec(`node ${waku} ${command} --port ${port}`, { cwd });
       debugChildProcess(cp, fileURLToPath(import.meta.url));
-      await waitPort({
-        port,
-      });
+      await waitPort({ port });
     });
 
     test.afterAll(async () => {
@@ -54,9 +48,7 @@ for (const { build, command } of commands) {
 
     test('basic', async ({ page }) => {
       await page.goto(`https://localhost:${port}/`);
-
       await expect(page.getByTestId('app-name')).toHaveText('Waku');
-
       await expect(
         page.getByTestId('client-counter').getByTestId('count'),
       ).toHaveText('0');
@@ -68,7 +60,6 @@ for (const { build, command } of commands) {
       await expect(
         page.getByTestId('client-counter').getByTestId('count'),
       ).toHaveText('2');
-
       await expect(
         page.getByTestId('server-ping').getByTestId('pong'),
       ).toBeEmpty();

e2e/rsc-router.spec.ts

@@ -34,18 +34,12 @@ for (const { build, command } of commands) {
 
     test.beforeAll(async () => {
       if (build) {
-        execSync(`node ${waku} ${build}`, {
-          cwd,
-        });
+        execSync(`node ${waku} ${build}`, { cwd });
       }
       port = await getFreePort();
-      cp = exec(`node ${waku} ${command} --port ${port}`, {
-        cwd,
-      });
+      cp = exec(`node ${waku} ${command} --port ${port}`, { cwd });
       debugChildProcess(cp, fileURLToPath(import.meta.url));
-      await waitPort({
-        port,
-      });
+      await waitPort({ port });
     });
 
     test.afterAll(async () => {

e2e/ssr-basic.spec.ts

@@ -34,18 +34,12 @@ for (const { build, command } of commands) {
 
     test.beforeAll(async () => {
       if (build) {
-        execSync(`node ${waku} ${build}`, {
-          cwd,
-        });
+        execSync(`node ${waku} ${build}`, { cwd });
       }
       port = await getFreePort();
-      cp = exec(`node ${waku} ${command} --port ${port}`, {
-        cwd,
-      });
+      cp = exec(`node ${waku} ${command} --port ${port}`, { cwd });
       debugChildProcess(cp, fileURLToPath(import.meta.url));
-      await waitPort({
-        port,
-      });
+      await waitPort({ port });
     });
 
     test.afterAll(async () => {

e2e/ssr-context-provider.spec.ts

@@ -0,0 +1,68 @@
+import { expect } from '@playwright/test';
+import { execSync, exec, ChildProcess } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+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',
+  },
+];
+
+const cwd = fileURLToPath(
+  new URL('./fixtures/ssr-context-provider', import.meta.url),
+);
+
+for (const { build, command } of commands) {
+  test.describe(`ssr-context-provider: ${command}`, () => {
+    let cp: ChildProcess;
+    let port: number;
+    test.beforeAll('remove cache', async () => {
+      await rm(`${cwd}/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));
+      await waitPort({ port });
+    });
+
+    test.afterAll(async () => {
+      await terminate(cp.pid!);
+    });
+
+    test('show context value', async ({ page }) => {
+      await page.goto(`https://localhost:${port}/`);
+      await page.waitForSelector('[data-testid="mounted"]');
+      await expect(page.getByTestId('value')).toHaveText('provider value');
+    });
+
+    test('no js environment', async ({ browser }) => {
+      const context = await browser.newContext({
+        javaScriptEnabled: false,
+      });
+      const page = await context.newPage();
+      await page.goto(`https://localhost:${port}/`);
+      await expect(page.getByTestId('value')).toHaveText('provider value');
+      await page.close();
+      await context.close();
+    });
+  });
+}

e2e/ssr-swr.spec.ts

@@ -34,18 +34,12 @@ for (const { build, command } of commands) {
 
     test.beforeAll(async () => {
       if (build) {
-        execSync(`node ${waku} ${build}`, {
-          cwd,
-        });
+        execSync(`node ${waku} ${build}`, { cwd });
       }
       port = await getFreePort();
-      cp = exec(`node ${waku} ${command} --port ${port}`, {
-        cwd,
-      });
+      cp = exec(`node ${waku} ${command} --port ${port}`, { cwd });
       debugChildProcess(cp, fileURLToPath(import.meta.url));
-      await waitPort({
-        port,
-      });
+      await waitPort({ port });
     });
 
     test.afterAll(async () => {