SAFE-Stack
SSR issue?
Description
There is a console error: Warning: Expected server HTML to contain a matching <div> in <div>.
Also, the header says "Rendered on client"
The html on the initial page load is the static index.html, no SSR parts
Repro steps
Clone & run :)
Expected behavior
No console errors
Actual behavior
A console error. Full callstack:
react-dom.development.js:530 Warning: Expected server HTML to contain a matching <div> in <div>.
warningWithoutStack @ react-dom.development.js:530
warnForInsertedHydratedElement @ react-dom.development.js:8543
didNotFindHydratableContainerInstance @ react-dom.development.js:9857
insertNonHydratedInstance @ react-dom.development.js:17715
tryToClaimNextHydratableInstance @ react-dom.development.js:17847
updateHostComponent @ react-dom.development.js:18559
beginWork$1 @ react-dom.development.js:20168
beginWork$$1 @ react-dom.development.js:25714
performUnitOfWork @ react-dom.development.js:24662
workLoopSync @ react-dom.development.js:24638
performSyncWorkOnRoot @ react-dom.development.js:24237
scheduleUpdateOnFiber @ react-dom.development.js:23665
updateContainer @ react-dom.development.js:27061
(anonymous) @ react-dom.development.js:27485
unbatchedUpdates @ react-dom.development.js:24400
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27484
hydrate @ react-dom.development.js:27559
setState$$2 @ react.fs:50
(anonymous) @ Util.js:569
uncurriedFn @ Util.js:534
mapSetState @ App.fs:105
(anonymous) @ Util.js:605
uncurriedFn @ Util.js:534
ProgramModule$$$runWith @ Extra.fs:158
(anonymous) @ App.fs:153
./src/Client/App.fs @ main.js:26165
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/Client/Client.fsproj @ main.js:26178
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
0 @ debugger.fs:76
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
(anonymous) @ bootstrap:861
(anonymous) @ bootstrap:861
Known workarounds
Please provide a description of any known workarounds.
Related information
Win10, latest master, app
"Rendered on client" is correct since it refreshes after the bundle is fully loaded. Try to look into the html source and you will find "renderedn on server"
Nope, the html is the source of the static index.html.
Modified the html to be sure:
And I get that at the client:
That static file is returned by the server if I open http://localhost:8085/ too. I guess the static file takes precedence.
If I rename the index.html to index.htmlx (or delete it), I get a webpack error, but the server now sends the "proper" html, but didn't load thru webpack dev server.
If I tweak devServerProxy in webpack.config.js to I get the SSR html.
And now I have another warning: Warning: Text content did not match. Server: "0.13.62 - Rendered on server" Client: "0.13.62" But this makes sense, since it's different. And the header text changes from "rendered on server" to "rendered on client" after a moment as you wrote.
BTW, that index.html is not needed anymore, as the index.html is server rendered too, right? It's not even published.
I will send a PR, check it if you have some time.
