(build-only) Objects are not valid as a React child

[himself65]

See: https://github.com/wakujs/ssr-benchmark

npm i
cd modules/waku
npm i
npm run start

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
    at retryNode (file:///Users/himself65/Code/ssr-benchmark/modules/waku/dist/ssr/rd-server.js:3761:15)
    at renderNodeDestructive (file:///Users/himself65/Code/ssr-benchmark/modules/waku/dist/ssr/rd-server.js:3581:237)
    at renderNode (file:///Users/himself65/Code/ssr-benchmark/modules/waku/dist/ssr/rd-server.js:3922:16)
    at renderChildrenArray (file:///Users/himself65/Code/ssr-benchmark/modules/waku/dist/ssr/rd-server.js:3831:93)
    at retryNode (file:///Users/himself65/Code/ssr-benchmark/modules/waku/dist/ssr/rd-server.js:3736:11)
    at renderNodeDestructive (file:///Users/himself65/Code/ssr-benchmark/modules/waku/dist/ssr/rd-server.js:3581:237)
    at renderNode (file:///Users/himself65/Code/ssr-benchmark/modules/waku/dist/ssr/rd-server.js:3922:16)
    at renderChildrenArray (file:///Users/himself65/Code/ssr-benchmark/modules/waku/dist/ssr/rd-server.js:3831:93)
    at retryNode (file:///Users/himself65/Code/ssr-benchmark/modules/waku/dist/ssr/rd-server.js:3736:11)
    at renderNodeDestructive (file:///Users/himself65/Code/ssr-benchmark/modules/waku/dist/ssr/rd-server.js:3581:237)

testdata type

export const testData: () => Promise<{ id: string; name: string }[]>;

table.tsx

import { testData } from "testdata";
import { use } from "react";

export function Table({ data }: { data: ReturnType<typeof testData> }) {
  const tdata = use(data);

  return (
    <table>
      <tbody>
        {tdata.map((entry) => (
          <Entry key={entry.id} entry={entry} />
        ))}
      </tbody>
    </table>
  );
}

function Entry(props: {
  entry: { id: string; name: string; asyncData?: () => Promise<string> };
}) {
  return (
    <tr>
      <td>{props.entry.id}</td>
      <td>{props.entry.name}</td>
    </tr>
  );
}

_layout.tsx

import type { ReactNode } from "react";
type RootLayoutProps = { children: ReactNode };

export default async function RootLayout({ children }: RootLayoutProps) {
  return children;
}

export const getConfig = async () => {
  return {
    render: "static",
  } as const;
};

index.tsx

import { Suspense } from "react";
import { testData } from "testdata";
import { Table } from "../components/table";

function App() {
  const data = testData()
  return (
    <Suspense>
      <Table data={data} />
    </Suspense>
  );
}

export default App;

export const getConfig = async () => {
  return {
    render: "static",
  } as const;
};

[himself65]

dumped json:

{
  "type": "script",
  "key": "1",
  "ref": null,
  "props": {
    "type": "module",
    "async": true,
    "dangerouslySetInnerHTML": {
      "__html": "\nglobalThis.__WAKU_CLIENT_IMPORT__ = (id) => import(id);\n"
    }
  },
  "_owner": null,
  "_store": {}
}

[dai-shi]

Does it work well with v0.23.1?

[himself65]

yeah, 0.23.1 is working

[dai-shi]

Can you make a failing e2e test?

[himself65]

#1498

[dai-shi]

@himself65 I added some commits and tests are passing. Can you check it please?

[dai-shi]

Please try reproducing the bug again. (I'm not a big fan of dangerouslySetInnerHTML, so we hope to fix it somehow.)

[hi-ogawa]

I think this is related to #1534. It looks like there's an issue with passing down promise from server to client. Sometimes this is saved by hackToIgnoreFirstTwoErrors, but not always. I'll push a few examples soon.

[dai-shi]

I'm not a big fan of hackToIgnoreFirstTwoErrors either. That hack should go away...

[hi-ogawa]

I'm "hoping" that this is a React bug and somehow fixable there. The behavior is same on #1493. Next, I'm trying to reproduce on bare bone @vitejs/plugin-rsc by imitating Waku's rendering pipeline.

[hi-ogawa]

OK, I think I got React SSR only reproduction without Waku nor RSC. Can someone verify if I'm missing something obvious?

// examples/36_form-repro/repro2.js 

import React from 'react';
import { renderToReadableStream } from 'react-dom/server.edge';

const promise1 = Promise.resolve('value1');
const promise2 = Promise.resolve('value2');

function Component1() {
  const data = React.use(promise1);
  console.log('Component1 React.use result:', data);
  return React.createElement(
    'div',
    null,
    `Component1: ${data}`,
    React.createElement(Component2Lazy),
  );
}

const Component2Lazy = React.lazy(async () => ({ default: Component2 }));

function Component2() {
  const data = React.use(promise2);
  console.log('Component2 React.use result:', data);
  return React.createElement('div', null, `Component2: ${data}`);
}

function App() {
  return React.createElement('div', null, React.createElement(Component1));
}

console.log('=== React SSR use() collision test ===');

async function test() {
  try {
    const stream = await renderToReadableStream(React.createElement(App));
    const reader = stream.getReader();
    let html = '';

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      html += new TextDecoder().decode(value);
    }

    console.log('HTML output:', html);
  } catch (error) {
    console.error('Error:', error);
  }
}

test();

$ node examples/36_form-repro/repro2.js 
=== React SSR use() collision test ===
Component1 React.use result: value1
Component2 React.use result: value1 // 👈👈 React.use(promise2) should be `value2`
HTML output: <div><div>Component1: value1<div>Component2: value1</div></div></div>

[dai-shi]

huh, that's interesting. have you tried react@canary?

[hi-ogawa]

Yes, I tested canary on Waku before, but the error was same. I just tested minimal repro (on canary) and it still reproduces. I'll check React issue.