I am running into the issue Warning: Expected server HTML to contain a matching <p> in <div>... when trying to hydrate my application on the client
I have tried removing most of the app and still run into the same error, so not sure what else could be wrong...
This is my SSR code:
import App from './app';
const router = express.Router();
router.get('*', async (req, res) => {
res.write(`
<html>
<head>
// tags for google ads etc
</head>
<body>
<div data-ui-role="content" id="root">
`);
const stream = renderToNodeStream(<App />);
stream.pipe(res, { end: false });
stream.on('end', () => {
res.locals.context = JSON.stringify(store.getState());
res.end(
`</div><script src="/assets/vendor.bundle.js"></script><script src="/assets/main.bundle.js"></script></body></html>`
);
});
});
And then I have my client hydration
import App from './app';
export const render = Component => {
const hydration = hydrateRoot(
document.getElementById('root');
<Component />
);
return hydration;
}
render(App);
And App.js is a simple react component
import React from 'react';
const App = () => {
return (
<div>
<p>Test</p>
</div>
);
}
I feel like I must be missing something obvious but not sure what.
I've checked what the server responds, and what the client responds, and it looks exactly the same... and if I remove the vendor bundle it doesn't throw the error. But unsure how I figure out what package is causing the issue
Note: I am in the middle updating to use renderToPipeableStream, but that shouldn't affect the hydration