Next.js Hydration error happening only in production.
There is a bug I've been trying to solve on the website I work at. There is one specific page that triggers an hydration error:
https://reactjs.org/docs/error-decoder.html/?invariant=418
https://reactjs.org/docs/error-decoder.html/?invariant=425
The main issue is that it only happens in production. On top of that, it only triggers when I directly access the page, or refresh it. If I'm at the home page, for example, and navigate to the page that triggers this error, it will not happen.
I've done a bit of research and this matches what is happening to me:
https://www.reddit.com/r/nextjs/comments/wlmkz6/hydration_errors_on_production_only/
However, I did modify all the localisation functions used in the application to just return an empty string and sent it to our staging / tests deployed site, and the issue was still happening.
The major issue is that this keeps firing sentry errors, clogging up the logs, and even reaching the errors limit quota available for the plan.
Since this doesn't happen in development mode, I'm a bit lost about how to actually trace the issue and fix it. So I'd just like to ask for some different ideas about how I can approach this issue.
React - Error Decoder
A JavaScript library for building user interfaces
React - Error Decoder
A JavaScript library for building user interfaces
7 Replies
Unfortunately I can't really show the code, considering it's from the company I work at, but I suspect one of the reasons might be a 3rd party library that could be causing this? I genuinely don't know what could it be. Here are the dependencies of the project:
Never experienced this but if you didn't know. You can run production build locally with npm run build, then npm run start.
Anyways try to look into libraries that are very much client only. There could be a component that is client side only and you would have to wrap it in a dynamic import.
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
Advanced Features: Dynamic Import | Next.js
Dynamically import JavaScript modules and React Components and split your code into manageable chunks.
If not a component but a library import, you could do this.
https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries
Advanced Features: Dynamic Import | Next.js
Dynamically import JavaScript modules and React Components and split your code into manageable chunks.
I noticed react-map-gl. And found that this tutorial also does the dynamic import.
https://dev.to/niharikak101/integrating-mapbox-with-next-js-the-cheaper-alternative-to-google-maps-g39
DEV Community
Integrating MapBox with Next.js — the Cheaper Alternative to Google...
Working with MapBox’s Search API and Map API to build an interactive map with some clickable pins
Thanks for the suggestions!
Unfortunately. I also tried running the build locally and the issue didn't happen.
The react map-gl was also causing hydration errors months ago when I implemented it, together with the react-countdown. I have both of these components dynamically imported already, with the SSR flag marked as false.
However, the issue really seems to be some sort of 3rd party library. Probably an extensive amount of trial and error until I'm able to find which one is causing it.
I do recall there is a specific tag using
dangerouslySetInnerHTML to render markup content coming from the API. Maybe this could cause such issues too? I'll try testing with it monday as well. There's also probably a better way to render markup content too.