Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Add iOS hydration mismatch details to error page #43584

Merged
merged 2 commits into from
May 9, 2023
Merged

[docs] Add iOS hydration mismatch details to error page #43584

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
087a063
Add details about hydration mismatches on iOS
josh- Nov 30, 2022
bf1d407
Merge branch 'canary' of github.com:vercel/next.js into docs-react-hy…
timneutkens May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 9 additions & 1 deletion errors/react-hydration-error.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,18 @@ Common causes with css-in-js libraries:
- When using other css-in-js libraries
- Similar to Styled Components / Emotion css-in-js libraries generally need configuration specified in their examples in the [examples directory](https://github.com/vercel/next.js/tree/canary/examples)

Local Overrides
Local Overrides:

It's possible you may have [Local Overrides enabled in Chrome devtools](https://developer.chrome.com/blog/new-in-devtools-65/#overrides). With this enabled, the HTML served will be different from what the SSR emitted. It also won't show up in view-source, so you may be left wondering what is going on.

Common causes on iOS:

- iOS attempts to detect phone numbers, email addressees and other data in text content and convert them into links, which can [lead to hydration mismatches](https://github.com/vercel/next.js/issues/38290). This can be disabled with the following `meta` tag:

```
<meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
```

### Useful Links

- [React Hydration Documentation](https://react.dev/reference/react-dom/client/hydrateRoot)
Expand Down