I have a reflex SPA that’s working fine but now I need to do routing.
I’m using Obelisk but I cannot use their router because while it’s working fine using ob run
, after I build my application via nix-build -o frontend-result -A ghcjs.frontend
it won’t run - the generated app fails with the following error:
reflex-dom warning: hydration failed: the DOM was not as expected at switchover time. This may be due to invalid HTML which the browser has altered upon parsing, some external JS altering the DOM, or the page being served from an outdated cache.
It says warning but after that it says can't access property parentNode of undefined
or something.
This error will even appear on a brand new application using ob init
so I’ve completely given up.
Eventually I’ve landed onto the following setup:
- I have a
frontend :: Frontend route
in myFrontend.hs
only to getob run
to function (it won’t otherwise) - My
main
is usingmainWidgetWithHead
to get around the hydration error
That has been working fine for a few months but now I’m completely lost with routing.
- I tried using the router from
reflex-dom-contrib
but I couldn’t even add the dependency. - I tried copying the code from
reflex-dom-contrib
and I got some parts of it working but while it “works” usingob run
I can’t get the application to compile because it saysjsaddle
doesn’t have aGHCJS.Foreign
module (even though HLS with cabal will find it just fine) - I tried adapting the 6 years old
servant-router
to work for my use case without success. - I really tried getting the Obelisk setup to run but as mentioned above, even with a brand new application it will throw the hydration error and fail. This user had the same issue 3 years ago but never posted about a resolution.
Routing is such a common thing to do I’m finding it very hard to believe that this isn’t a solved problem, but I’m probably missing something.