fix(next): add ssrPrepass-callback to avoid bundling of react-dom (#5426)

Author: KATT

playwright/smoke.test.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
 
 test.setTimeout(35e3);
 
@@ -8,12 +8,7 @@ test('go to /', async ({ page }) => {
   await page.waitForSelector(`text=Starter`);
 });
 
-test('test 404', async ({ page }) => {
-  const res = await page.goto('/post/not-found');
-  expect(res?.status()).toBe(404);
-});
-
-test('add a post', async ({ page, browser }) => {
+test('add a post', async ({ page }) => {
   const nonce = `${Math.random()}`;
 
   await page.goto('/');
@@ -23,32 +18,5 @@ test('add a post', async ({ page, browser }) => {
   await page.waitForLoadState('networkidle');
   await page.reload();
 
-  expect(await page.content()).toContain(nonce);
-
-  const ssrContext = await browser.newContext({
-    javaScriptEnabled: false,
-  });
-  const ssrPage = await ssrContext.newPage();
-  await ssrPage.goto('/');
-
-  expect(await ssrPage.content()).toContain(nonce);
-});
-
-test('server-side rendering test', async ({ page, browser }) => {
-  // add a post
-  const nonce = `${Math.random()}`;
-
-  await page.goto('/');
-  await page.fill(`[name=title]`, nonce);
-  await page.fill(`[name=text]`, nonce);
-  await page.click(`form [type=submit]`);
-  await page.waitForLoadState('networkidle');
-
-  // load the page without js
-  const ssrContext = await browser.newContext({
-    javaScriptEnabled: false,
-  });
-  const ssrPage = await ssrContext.newPage();
-  await ssrPage.goto('/');
-  expect(await ssrPage.content()).toContain(nonce);
+  await page.waitForSelector(`text="${nonce}"`);
 });

src/utils/trpc.ts

@@ -1,5 +1,6 @@
 import { httpBatchLink, loggerLink } from '@trpc/client';
 import { createTRPCNext } from '@trpc/next';
+
 import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
 import type { NextPageContext } from 'next';
 // ℹ️ Type-only import:
@@ -96,32 +97,7 @@ export const trpc = createTRPCNext<AppRouter, SSRContext>({
   /**
    * @link https://trpc.io/docs/v11/ssr
    */
-  ssr: true,
-  /**
-   * Set headers or status code when doing SSR
-   */
-  responseMeta(opts) {
-    const ctx = opts.ctx as SSRContext;
-
-    if (ctx.status) {
-      // If HTTP status set, propagate that
-      return {
-        status: ctx.status,
-      };
-    }
-
-    const error = opts.clientErrors[0];
-    if (error) {
-      // Propagate http first error from API calls
-      return {
-        status: error.data?.httpStatus ?? 500,
-      };
-    }
-
-    // for app caching with SSR see https://trpc.io/docs/v11/caching
-
-    return {};
-  },
+  ssr: false,
   /**
    * @link https://trpc.io/docs/v11/data-transformers
    */