React 18 SSR hydration failure in MeteorJS

[laakal]

Description

Hydration failed because the initial UI does not match what was rendered on the server.

• You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
• Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.

Steps to reproduce

Client Setup

Meteor.startup(() => {
  FastRender.onPageLoad(async () => {
    const target = document.getElementById('react-root');
    const root = createRoot(target);
    const app = (
      <ApolloProvider client={apolloClient}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </ApolloProvider>
    );
    return !window.noSSR ? hydrateRoot(target, app) : root.render(app);
  });

Meteor Version

v2.7

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[rj-david]

When coming from SSR (window.noSSR !== true), no need to call createRoot()

[laakal]

Thanks @rj-david. But its did not resolve the following errors:

• Warning: Expected server HTML to contain a matching <a> in <div>.
• There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

[rj-david]

The second error means that the SSR version is mismatched on the hydrated client version. Any chance that you tried this with React 17 without the warning?

P.S. I haven't moved to React 18 yet because of possible issues with Meteor fibers
#12161

[laakal]

@rj-david Same error in React v17. So let's wait for Meteor v2.8