I'd really appreciate if someone could help me out. Here is my current setup in index.js. I don't understand why I get the error mentioned above.
import React from "react";
import "normalize.css";
import "./index.css";
import App from "./App";
import {store} from './store';
import {Provider} from 'react-redux';
import {hydrateRoot} from 'react-dom/client';
import {HelmetProvider} from 'react-helmet-async';
const container = document.getElementById("root");
const root = hydrateRoot(container, <App/>);
root.render(
<Provider store={store}>
<HelmetProvider>
<App tab="home" />
</HelmetProvider>
</Provider>);
I tried this setup, but it just gave me many more errors:
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById("root");
const root = hydrateRoot(container,
<Provider store={store}>
<HelmetProvider>
<App />
</HelmetProvider>
</Provider>);
errors: 1.Warning: Expected server HTML to contain a matching in . 2.Hydration failed because the initial UI does not match what was rendered on the server. 3.An error occurred during hydration. The server HTML was replaced with client content in . 4.Error: Hydration failed because the initial UI does not match what was rendered on the server. 5.There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
