search

brillout / react-streaming

React Streaming. Full-fledged & Easy.
MIT License
216 stars 14 forks source link

client side hydrates error when I use 'useAsync' #22

Closed NikaidouSkin42 closed 1 year ago

NikaidouSkin42 commented 1 year ago

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 ( <>

Welcome

  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} ); }

function LazyComponent() { // hydrate error here const val = useAsync( "hello-component-key", () => new Promise((resolve) => { setTimeout(() => resolve("Hello, I was lazy."), 1000); }) ); return

{val}

; }



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 1 year ago

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

NikaidouSkin42 commented 1 year ago

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 1 year ago

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 1 year ago

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 1 year ago

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 1 year ago

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 1 year ago

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

NikaidouSkin42 commented 1 year ago

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 1 year ago

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 1 year ago

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

brillout commented 1 year ago

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.