I've seen this happen a lot. Try running it in a browser without any extensions. Many of them inject HTML, which is then treated as hydration difference with server-rendered version. If that's the case, I am not sure if there is anything we can do about it (I'd love to hear from someone, who has good, universal solution to this)

Does the issue stay after creating a production build? And is there any other solution because telling users to disable all extensions seems a bit over the top and probably wont happen

@Western paper wasp The hydration errors coming from initial renders are of two types:
- Something beyond your control (browser extensions) - those you might need to simply ignore as they won't break the production page.
- Something from your code - look for places, where your server might return different value than the client. For example when you render date time string, and the server is in another time zone than user, both client and server will have different html. For those you might either assume time zone on server (if the app is localized to single TZ), or add suppressHydrationWarning attribute to any component/element that renders the time.

I haven't seeny other possible solutions I'd go with - you could simply add suppressHydrationWarning to your body, but at this point you'll also loose the ability to detect any hydration issues from your code, so I tend to avoid it.

I'd check if the browser extension is indeed the issue - it might not be. Test it in plain browser - if this is still happening, then the issue lies in the code (either yours or third party). In other case, the issue comes from extensions and you simply should ignore it as you won't be able to predict all the extensions users might have.