Hydration error on first install

[sajadabedi]

I just experimented with the v3 using the new npx create-payload-app command, and on my first run, I encountered the NextJS hydration error. During the installation, I selected website and sqlite as the database. When I ran the app locally, this is the error I got.

[tylandavis]

Hey @sajadabedi, I moved this to the payload repo. The website repo is for our website at payloadcms.com.

You can find the source code for the website template and others in our templates directory

[q8gazy]

@sajadabedi It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

[stuckinsnow]

Do you have colorpicker installed by any chance? I saw you are a designer, and that will cause it

[vilmarfonseca]

@sajadabedi In my case, the issue was related to the Grammarly browser extension. Removing that extension removed the hydration error I was getting.

[sajadabedi]

Yes, it turns out it was because of Grammarly. However, I still think it's weird that this happened, as I don't have this problem with React/Next.js.

[JarrodMFlesch]

Looks like you can follow along here. I would see if you can reach out to grammarly (not sure how they accept feedback) about adding the suppresshydrationwarning to the script tag they inject.

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.