How to handle hydration errors caused by browser extensions

Question

As a NextJS newbie, I would like to ask how to deal with the hydration errors caused by browser extensions.

My app is working fine - without errors on the console - if I disable all browser extensions or use an incognito mode. However, using normal Chrome browser window the console is full with errors caused by extensions like LastPass, Grammarly and/or some others.

The error message is:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

The problem is, that extensions add some extra tags, attributes to the HTML code so it is really does not match.

In real life I can not ask users to disable extensions or use incognito mode.

So how should I handle such errors?

I use React 18.2 and NextJS 13.2

Answer 1

This is a known issue that occurs because NextJS uses the html element as it's rendering root and some browser extensions inject elements in to the document before the client side react has a chance to hydrate.

If you're using a version of React that is <18.2, updating should solve this issue. You can apply a diff to your package json and you should see the error disappear.