client side hydrates error when I use 'useAsync' #22
Description
client side hydrates error，so I can't emit any click event after the streamEnd。
here is the error:
createErrorWithCleanStackTrace.js:9 Uncaught Error: [react-streaming@0.3.11][Bug] You stumbled upon a bug in react-streaming's source code. Reach out at https://github.com/brillout/react-streaming/issues/new or https://discord.com/invite/H23tjRxFvx and include this error stack (the error stack is usually enough to fix the problem). A maintainer will fix the bug (usually under 24 hours). Do not hesitate to reach out as it makes react-streaming more robust.
at Object.<anonymous> (debug.js:10:1)
at ./node_modules/react-streaming/dist/cjs/utils/debug.js (debug.js:98:1)
at __webpack_require__ (bootstrap:19:1)
at ./node_modules/react-streaming/dist/cjs/server/utils.js (utils.js:19:14)
at __webpack_require__ (bootstrap:19:1)
at ./node_modules/react-streaming/dist/cjs/server/useStream.js (useStream.js:28:17)
at __webpack_require__ (bootstrap:19:1)
at ./node_modules/react-streaming/dist/cjs/server/useAsync.js (useAsync.js:5:21)
at __webpack_require__ (bootstrap:19:1)
at ./node_modules/react-streaming/dist/cjs/server/hooks.js (hooks.js:4:18)
at __webpack_require__ (bootstrap:19:1)
at ./src/Page.jsx (module.js:22:1)
at __webpack_require__ (bootstrap:19:1)
at ./src/react18client/index.js (index.js:1:1)
at __webpack_require__ (bootstrap:19:1)
at bootstrap:83:1
at bootstrap:83:1
here is my code:
1.server side:
const { pipe, abort, streamEnd, injectToStream } = await renderToStream(
<div id="root">
<Page />
</div>,
{ disable: false }
);
pipe(res);
injectToStream('<script src="/static/client-build.js"></script>');
2.client side:
import { hydrateRoot } from "react-dom/client.js";
import Page from "../Page.jsx";
const root = document.getElementById("root");
hydrateRoot(root, <Page />);
- Page.jsx
import React, { useState, Suspense } from "react";
import { useAsync } from "react-streaming";
export default function Page() {
return (
<>
<h1>Welcome</h1>
This page is:
<ul>
<li>
<Suspense fallback={<p>Loading...</p>}>
<LazyComponent />
</Suspense>
</li>
<li>Rendered to HTML.</li>
<li>
Interactive. <Counter />
</li>
</ul>
</>
);
}
function Counter() {
const [count, setCount] = useState(0);
return (
<button
type="button"
onClick={() => {
console.log("count!");
setCount((count) => count + 1);
}}
>
Counter {count}
</button>
);
}
function LazyComponent() {
// hydrate error here
const val = useAsync(
"hello-component-key",
() =>
new Promise((resolve) => {
setTimeout(() => resolve("Hello, I was lazy."), 1000);
})
);
return <p>{val}</p>;
}
if I remove the "useAsync" and "Suspense"，hydrate success，I can click the Button and Emit the click event that I've bind，everything is find。
Could you please take a look at this issues? :)