brillout/react-streaming

client side hydrates error when I use 'useAsync'

NikaidouSkin42 opened this issue · 11 comments

NikaidouSkin42 commented

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 />);
  1. 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? :)

brillout commented

The stack trace is broken. Can you publish a reproduction?

NikaidouSkin42 commented

The stack trace is broken. Can you publish a reproduction?

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

The console is showing this error all the time
here is the code:
https://github.com/NikaidouSkin42/react-streaming-demo1

brillout commented

I get another error:

gitpod /workspace/react-streaming-demo1 (main) $ npm run build

> iso-ssr-csr@1.0.0 build
> npm-run-all build:*


> iso-ssr-csr@1.0.0 build:server
> webpack --config webpack.server.config.js

node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/workspace/react-streaming-demo1/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/workspace/react-streaming-demo1/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/workspace/react-streaming-demo1/node_modules/webpack/lib/NormalModule.js:471:10)
    at /workspace/react-streaming-demo1/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/react-streaming-demo1/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/react-streaming-demo1/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/react-streaming-demo1/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/workspace/react-streaming-demo1/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /workspace/react-streaming-demo1/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/workspace/react-streaming-demo1/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /workspace/react-streaming-demo1/node_modules/babel-loader/lib/index.js:44:71 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.16.0
ERROR: "build:server" exited with 1.

Which seems unrelated to react-streaming.

I'm running the code on https://gitpod.io#https://github.com/NikaidouSkin42/react-streaming-demo1.

NikaidouSkin42 commented

I get another error:

gitpod /workspace/react-streaming-demo1 (main) $ npm run build

> iso-ssr-csr@1.0.0 build
> npm-run-all build:*


> iso-ssr-csr@1.0.0 build:server
> webpack --config webpack.server.config.js

node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/workspace/react-streaming-demo1/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/workspace/react-streaming-demo1/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/workspace/react-streaming-demo1/node_modules/webpack/lib/NormalModule.js:471:10)
    at /workspace/react-streaming-demo1/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/react-streaming-demo1/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/react-streaming-demo1/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/react-streaming-demo1/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/workspace/react-streaming-demo1/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /workspace/react-streaming-demo1/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/workspace/react-streaming-demo1/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /workspace/react-streaming-demo1/node_modules/babel-loader/lib/index.js:44:71 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.16.0
ERROR: "build:server" exited with 1.

Which seems unrelated to react-streaming.

I'm running the code on https://gitpod.io#https://github.com/NikaidouSkin42/react-streaming-demo1.

this might be a node version issue。
you could try switching Node.js to v12。

Node.js : 12.13.1
NPM : 6.12.1

brillout commented

Node.js 12 (and 14) are now deprecated. Can you try yourself on GitPod? And report back if you find a non-deprecated Node.js version that works.

NikaidouSkin42 commented

Node.js 12 (and 14) are now deprecated. Can you try yourself on GitPod? And report back if you find a non-deprecated Node.js version that works.

I install a NVM and switch Node.js to v12，it works。
https://nikaidouski-reactstream-msvmgv4ibkq.ws-us98.gitpod.io

brillout commented

react-streaming doesn't support Node.js 12. So I won't debug a reproduction running on Node.js 12.

NikaidouSkin42 commented

react-streaming doesn't support Node.js 12. So I won't debug a reproduction running on Node.js 12.

Or you can run this command，then run "npm run build"。 it still works on Node.js 16 :

# for macOS, Linux or Windows Git Bash
export NODE_OPTIONS=--openssl-legacy-provider

# for Windows CMD (Command Prompt)
set NODE_OPTIONS=--openssl-legacy-provider

# for Windows PowerShell
$env:NODE_OPTIONS="--openssl-legacy-provider"
NikaidouSkin42 commented

Error: error:0308010C:digital envelope routines::unsupported
How to fix error:0308010C:digital envelope routines::unsupported on NodeJS：
https://sebhastian.com/error-0308010c-digital-envelope-routines-unsupported/

brillout commented

I could reproduce. Seems like a webpack misconfiguration. Stay tuned.

brillout commented

Update to 0.3.12 and follow the instructions of the new error.

Btw. in case you think you can convince your employer: https://github.com/sponsors/brillout.

  • 👍1