Hydrate is not a function about wasmedge-quickjs

[juntao]

Since this occurs with regular SSR, perhaps you could ask in stackoverflow or official React forums?

Yes, interestingly if I run the exact same source code via npm start which is served on localhost:3000 the same "root.hydrate is not a function" error appears in the browser's console.

Also the same error exists when I use ReactDOMServer instead of just ReactDOM i.e.

import ReactDOMServer from 'react-dom/client';

const root = ReactDOMServer.createRoot(document.getElementById('root'));

root.hydrate(

// snip ...

[juntao]

Do you have this error when you do regular React SSR without wasmedge?

[tpmccallum]

Yes, interestingly if I run the exact same source code via npm start which is served on localhost:3000 the same "root.hydrate is not a function" error appears in the browser's console.

Also the same error exists when I use ReactDOMServer instead of just ReactDOM i.e.

import ReactDOMServer from 'react-dom/client';
const root = ReactDOMServer.createRoot(document.getElementById('root'));
root.hydrate(
// snip ...

[tpmccallum]

Thankfully for now root.render works just fine for regular SSR

As well as with WasmEdge SSR.

[tpmccallum]

Link to question for our convenience

• https://stackoverflow.com/questions/72253995/why-do-reactdomserver-and-reactdom-give-the-root-hydrate-is-not-a-function-err

[tpmccallum]

Please find a solution to this issue; as per a response via the above stackoverflow link.

In summary hydrate has been replaced with hydrateRoot in React 18.

hydrateRoot(container, element[, options])

The code for this SSR example was altered as per the following code block.

// Before
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.hydrate(
  <React.StrictMode>
   <App />
 </React.StrictMode>
);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = hydrateRoot(container, <App />);

After implementing this slightly different syntax the error was resolved.

There is also official documentation for hydrateRoot