Decrypt React Minified Errors

Working on a project with Next.js (or React) comes with a learning curve. Learning how to utilize server-side rendering (SSR) is part of it. While learning to utilize SSR, there will be times of frustration and unexpected challenges; understanding hydration errors is one of them. In this blog post, we will walk through the steps to decipher console errors in Next.js/React caused by hydration errors and discrepancies between server and client-side renders.

What do you mean by decrypting?

I asked myself the same question, why decrypt? I used this term to grab your attention because the error you see in the console might not clearly explain which part of your HTML (code) is causing the issue, and which line it's in within your codebase. You will see errors like:

So if we look at one of these errors, you will see the error message: Text content does not match server-rendered HTML. You can check the rest of the messages in React docs for decoding error messages (423, 418). Okay, now we are one step closer to debugging what's happening.

Next: Understanding possible reasons

When you start debugging this issue and looking at the errors, you will realize that it happens with the page content. Since we are looking for a mismatch between server and client-side renders, we should focus on what might have caused this. Where does the error occur? Is it only in one of the page types or in all pages? Which component might have caused this? Before diving into specifics, what I did was understand which page type was causing it for me.

Lucky for me that it didn't take long; my individual blog page was the reason behind this console error.

After finding out that this error was caused by something inside the blog page, I checked for the possible reasons;

1. Published date
2. One of the slices; the difference between how they are returned from CMS and how they are rendered

I went through them one by one and realized that it was because of my syntax highlighting component which uses react-syntax-highlighter package under the hood. This brings me to; lazy loading slice (component) that renders code blocks.

Lazy Loading Syntax Highlighter

Next.js supports lazy loading with its next/dynamic. When applied, lazy loading will defer the loading of the components, therefore, reducing the initial load. Since I am using my syntax highlighted components as slices and they are not needed everywhere, this made perfect sense to me.

To use next/dynamic with named imports, without server-side rendering, we can do as follows;

That's how we can use next/dynamic package. Next up is applying this with react-syntax-highlighter. Since we are working towards a lighter and more dynamic component, we can take advantage of syntax highlighter's async packages.

Following the suggestion in react-syntax-highlighter readme, our dynamic import will be:

And voilà! No more console errors. Blog pages work as expected and React Minified Errors are gone!

Summary

In this blog post, we tried to understand the reasons behind React Minified Errors; starting with the error messages and debugging our app to see the possible reasons. We also used next/dynamic to fix the mismatch between server and client side renders.