choc-ui
choc-ui copied to clipboard
Site crashes in Firefox with "Hydration failed because the initial UI does not match what was rendered on the server."
In Firefox the site often crashes with a blank page and the error message:
Application error: a client-side exception has occurred (see the browser console for more information).
Here's a screenshot:
When I open the console I see the following message:
Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
which, if you follow the link, leads to this error message:
Hydration failed because the initial UI does not match what was rendered on the server.
I cleared cookies/site data and that fixed it temporarily. But then I was browsing the site and the error eventually popped up again. A hard refresh fixed it. Then when viewing the CTA page it happened again, but with a different error:
Uncaught TypeError: document.getElementById(...) is null
getUrlVar https://cdn.carbonads.com/carbon.js?serve=CESDP23M&placement=choc-uitech:1
init https://cdn.carbonads.com/carbon.js?serve=CESDP23M&placement=choc-uitech:1
<anonymous> https://cdn.carbonads.com/carbon.js?serve=CESDP23M&placement=choc-uitech:1
[carbon.js:1:9445](https://cdn.carbonads.com/carbon.js?serve=CESDP23M&placement=choc-uitech)
Console logs are here: console-export-2023-10-11_9-38-8.txt
I'm don't have a lot of experience with NextJS so I'm not entirely sure how to best troubleshoot. I tried with a "clean" Firefox profile (no extensions or anything additional installed) and saw the same behavior.