choc-ui icon indicating copy to clipboard operation
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."

Open joekrill opened this issue 1 year ago • 0 comments

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:

Screenshot 2023-10-11 at 9 31 34 AM

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.

joekrill avatar Oct 11 '23 13:10 joekrill