This was recently a bug in Next.js where multiple versions of React were loaded causing hydration mismatches. This bug has been fixed on the Next.js repo. If you bump the Next.js version to the latest version than this issue should go away.
Starting from the the simple sign-in and registration form component using Next version ^13.4.13 I was not able to run into the hydration mismatch.
You can apply the following steps to get to the latest version of Next.js:
npm install next@latest
rm -rf .next This is to ensure that no old/stale caches are present
npm run dev
If, after bumping the version, this is still an issue for you. Could you attach a minimal reproduction that contains the bug so that we can take a look at what's going on?
What component (if applicable)
Describe the bug Form is causing hydration errors in nextjs 13
Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Did not expect server HTML to contain a
Hey, thank you for this bug report! 🙏
This was recently a bug in Next.js where multiple versions of React were loaded causing hydration mismatches. This bug has been fixed on the Next.js repo. If you bump the Next.js version to the latest version than this issue should go away.
Starting from the the simple sign-in and registration form component using Next version ^13.4.13 I was not able to run into the hydration mismatch.
You can apply the following steps to get to the latest version of Next.js:
npm install next@latestrm -rf .nextThis is to ensure that no old/stale caches are presentnpm run devIf, after bumping the version, this is still an issue for you. Could you attach a minimal reproduction that contains the bug so that we can take a look at what's going on?
Hope this helps!