rsnext/errors
abdennor 1bbd264216
Add additional fix in hydration error document (#40675)
I had the same issue, so the fix that worked for me was pulled from this
thread https://stackoverflow.com/a/71870995

I have been experiencing the same problem lately with NextJS and i am
not sure if my observations are applicable to other libraries. I had
been wrapping my components with an improper tag that is, NextJS is not
comfortable having a p tag wrapping your divs, sections etc so it will
yell "Hydration failed because the initial UI does not match what was
rendered on the server". So I solved this problem by examining how my
elements were wrapping each other. With material UI you would need to be
cautious for example if you use a Typography component as a wrapper, the
default value of the component prop is "p" so you will experience the
error if you don't change the component value to something semantic. So
in my own opinion based on my personal experience the problem is caused
by improper arrangement of html elements and to solve the problem in the
context of NextJS one will have to reevaluate how they are arranging
their html element

<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->


## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-22 18:14:18 -07:00
..
404-get-initial-props.md Rename getServerProps to getServerSideProps (#10722) 2020-02-27 11:04:30 -06:00
amp-bind-jsx-alt.md Add error message for AMP bind syntax (#6865) 2019-04-02 17:32:07 -05:00
amp-export-validation.md Add AMP validation on export (#6794) 2019-03-26 16:21:27 -05:00
api-routes-response-size-limit.md Update 4MB API Routes warning error guide. (#37779) 2022-06-16 21:59:54 +00:00
api-routes-static-export.md chore: Enable Alex documentation linting for error pages (#26526) 2021-06-23 23:33:58 -05:00
app-container-deprecated.md Prettier fix (#8754) 2019-09-16 15:24:42 +02:00
beta-middleware.md Update Middleware beta message. (#37934) 2022-06-23 01:11:31 +00:00
build-dir-not-writeable.md Update redirected or broken Vercel docs links. (#21119) 2021-01-14 15:37:21 +00:00
built-in-css-disabled.md Add warning when built-in CSS/SCSS support is disabled (#10942) 2020-03-10 14:29:40 -04:00
can-not-output-to-public.md chore: Enable Alex documentation linting for error pages (#26526) 2021-06-23 23:33:58 -05:00
can-not-output-to-static.md chore: Enable Alex documentation linting for error pages (#26526) 2021-06-23 23:33:58 -05:00
cant-override-next-props.md Update references to zeit/next.js (#13463) 2020-05-27 17:51:11 -04:00
circular-structure.md Remove trailing spaces (#6547) 2019-03-07 17:40:08 +01:00
client-side-exception-occurred.md Update client-side default error (#25997) 2021-06-11 16:23:45 +02:00
config-resolve-alias.md Update references to zeit/next.js (#13463) 2020-05-27 17:51:11 -04:00
conflicting-amp-tag.md Move syntax formatting to prettier (#7454) 2019-05-29 13:57:26 +02:00
conflicting-public-file-page.md docs: update links to docs site (#14305) 2020-06-18 09:54:07 +00:00
conflicting-ssg-paths.md Fix broken data fetching links in docs (#33766) 2022-04-22 14:03:07 +02:00
css-global.md Updated the Error message describing the alternative and added styles… (#14652) 2021-07-25 04:53:33 +00:00
css-modules-npm.md Update references to zeit/next.js (#13463) 2020-05-27 17:51:11 -04:00
css-npm.md Changed all occurrences of etc to match (#34280) 2022-02-13 00:22:52 +00:00
custom-document-image-import.md Docs: missing parenthesis on example (#37156) 2022-05-24 15:01:56 +00:00
custom-error-no-custom-404.md Warn when user has pages/_error but no pages/404 (#11603) 2020-04-05 13:19:14 +02:00
deleting-query-params-in-middlewares.md fix: Change url to nextUrl inside delete-query-params-in-middlewares.md (#33796) 2022-02-06 09:21:28 -06:00
deprecated-target-config.md Fix link to documentation from deprecated target config message (#30607) 2021-10-29 09:18:25 +00:00
doc-crossorigin-deprecated.md Update references to zeit/next.js (#13463) 2020-05-27 17:51:11 -04:00
duplicate-sass.md Warn on duplicate Sass deps (#16398) 2020-08-20 16:05:29 +00:00
edge-dynamic-code-evaluation.md feat(edge): allows configuring Dynamic code execution guard (#39539) 2022-09-12 15:01:00 -07:00
empty-configuration.md fix: 9919 Add warning when no config is exported from next.con… (#10228) 2020-01-29 09:12:30 +01:00
empty-object-getInitialProps.md fix broken link in error page (#10159) 2020-01-19 16:02:44 +01:00
env-key-not-allowed.md Add process env NEXT_RUNTIME (#36383) 2022-04-26 17:54:28 +00:00
env-loading-disabled.md Enable .env support by default (#12911) 2020-05-15 14:02:16 -05:00
experimental-jest-transformer.md Add next-swc jest transform (#30993) 2021-11-08 17:35:04 +01:00
export-all-in-page.md fix typo in export-all-in-page (#15925) 2020-08-06 00:11:11 +00:00
export-image-api.md Add images.unoptimized: true for easy next export (#37698) 2022-06-16 20:20:17 +00:00
export-no-custom-routes.md Add warning when exporting with custom routes (#17538) 2020-10-05 07:11:06 +00:00
export-path-mismatch.md docs: update links to docs site (#14305) 2020-06-18 09:54:07 +00:00
failed-loading-swc.md fix grammar in failed-loading-swc (#37765) 2022-06-16 14:38:42 -05:00
failed-to-fetch-devpagesmanifest.md fix: improve logging for _devPagesManifest.json loading failures (#38046) 2022-08-07 19:36:03 +00:00
future-webpack5-moved-to-webpack5.md chore: Enable Alex documentation linting for error pages (#26526) 2021-06-23 23:33:58 -05:00
generatebuildid-not-a-string.md Trim buildId returned from generateBuildId (#5634) 2018-11-12 15:57:48 +01:00
get-initial-props-as-an-instance-method.md Refactor data fetching API docs (#30615) 2022-01-12 08:56:51 +01:00
get-initial-props-export.md feat(next export): add warning if using getInitialProps (#37642) 2022-06-13 02:34:23 +00:00
google-font-display.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
google-font-preconnect.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
gsp-redirect-during-prerender.md Fix broken data fetching links in docs (#33766) 2022-04-22 14:03:07 +02:00
gssp-component-member.md Fix typo in error markdown (#20825) 2021-01-07 10:22:43 +01:00
gssp-export.md Fix broken data fetching links in docs (#33766) 2022-04-22 14:03:07 +02:00
gssp-mixed-not-found-redirect.md Fix broken data fetching links in docs (#33766) 2022-04-22 14:03:07 +02:00
gssp-no-mutating-res.md Fix broken data fetching links in docs (#33766) 2022-04-22 14:03:07 +02:00
head-build-id.md Update instances of Now to Vercel where applicable (#13760) 2020-06-04 14:57:17 +00:00
href-interpolation-failed.md Add error when href interpolation fails (#16946) 2020-09-10 20:05:02 +00:00
ignored-compiler-options.md Chore/stable swc compiler options (#34074) 2022-02-10 01:54:28 +00:00
import-esm-externals.md add support for esm externals (#27069) 2021-07-10 16:49:02 +00:00
import-next.md Add warning when importing "next" directly (#35884) 2022-04-05 10:57:45 -05:00
improper-devtool.md Warn/revert custom devtool in development mode (#14285) 2020-06-24 04:15:57 +00:00
incompatible-href-as.md Update error when internal href and external as are used (#20658) 2021-01-01 12:14:42 -06:00
inline-script-id.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
install-sass.md Improve Sass Error (#10982) 2020-03-11 16:34:14 -04:00
install-sharp.md Update install-sharp.md (#18508) 2020-10-30 10:56:11 -04:00
invalid-api-status-body.md Add heading to invalid-api-status-body error (#34150) 2022-02-09 21:01:58 -06:00
invalid-assetprefix.md Add check for invalid assetPrefix (#9759) 2019-12-16 16:07:03 +01:00
invalid-dynamic-options-type.md SWC: Add error checks and tests to next-dynamic (#31683) 2021-11-26 14:22:28 +00:00
invalid-dynamic-suspense.md fix(#39609): warns about suspense and ssr (#39676) 2022-08-18 13:53:23 +00:00
invalid-external-rewrite.md Disallow basePath: false for internal routes (#15837) 2020-08-04 17:50:09 +00:00
invalid-getserversideprops-value.md Fix docs path "Invalid getServerSideProps Return Value" (#39443) 2022-08-10 02:34:43 +00:00
invalid-getstaticpaths-value.md Update invalid-getstaticpaths-value.md (#29397) 2021-09-26 07:13:13 -05:00
invalid-getstaticprops-value.md Docs: Add useful link to invalid-getstaticprops-value error message (#35915) 2022-04-05 18:59:58 +00:00
invalid-href-passed.md Fix invalid href error message (#17183) 2020-09-18 15:50:02 +00:00
invalid-i18n-config.md Document i18n locale limit (#27542) 2021-07-27 20:09:36 +00:00
invalid-images-config.md Update to stable: next/future/image, remotePatterns, unoptimized (#40142) 2022-08-31 22:44:17 +00:00
invalid-multi-match.md Add err.sh for invalid multi-match usage (#9498) 2019-11-23 02:23:01 +01:00
invalid-next-config.md Add next.config.js validation with ajv (#38498) 2022-07-13 13:31:55 -05:00
invalid-page-config.md Fix a typo in docs (#40501) 2022-09-13 13:22:25 +02:00
invalid-project-dir-casing.md Fix invalid project dir casing breaking Next.js on Windows (#29205) 2021-09-22 21:29:27 +00:00
invalid-react-version.md Add checking of react versions (#6892) 2019-04-04 16:47:17 -05:00
invalid-redirect-gssp.md Fix broken data fetching links in docs (#33766) 2022-04-22 14:03:07 +02:00
invalid-relative-url-external-as.md Update error when internal href and external as are used (#20658) 2021-01-01 12:14:42 -06:00
invalid-resolve-alias.md Update references to zeit/next.js (#13463) 2020-05-27 17:51:11 -04:00
invalid-route-source.md [Fix] common misspelling errors (#15288) 2020-07-19 04:38:20 +00:00
invalid-script.md Adds inline script functionality to next/script for worker and beforeInteractive strategies (#36364) 2022-04-29 15:20:31 +00:00
invalid-server-options.md Detailed error and warnings upon next() call (#13539) 2020-06-03 03:19:29 +00:00
invalid-styled-jsx-children.md next-swc: styled-jsx error checking and reporting updated (invalid-styled-jsx-children.md) (#31940) 2021-12-20 16:17:37 +01:00
invalid-webpack-5-version.md use webpack resolve api to resolve in externals config (#21205) 2021-01-17 20:02:20 +01:00
large-page-data.md docs(errors/large-page-data): how to see data being passed to page (#40491) 2022-09-13 00:44:43 +00:00
link-multiple-children.md Add helpful error for link with multiple children (#25657) 2021-05-31 19:41:57 +00:00
link-no-children.md Update next/link error when no children are provided (#35453) 2022-03-22 13:58:55 -05:00
link-passhref.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
manifest.json feat(edge): allows configuring Dynamic code execution guard (#39539) 2022-09-12 15:01:00 -07:00
max-custom-routes-reached.md Add warning for large number of routes (#27214) 2021-07-16 14:59:54 +00:00
middleware-dynamic-wasm-compilation.md feat(edge): allows configuring Dynamic code execution guard (#39539) 2022-09-12 15:01:00 -07:00
middleware-new-signature.md Deprecate nested Middleware in favor of root middleware (#36772) 2022-05-19 15:46:21 +00:00
middleware-parse-user-agent.md fix(ts): Middleware type tweaks (#38625) 2022-08-08 09:40:44 -05:00
middleware-relative-urls.md Remove deprecation for relative URL usage in middlewares (#34461) 2022-02-17 09:12:36 -06:00
middleware-request-page.md fix(ts): Middleware type tweaks (#38625) 2022-08-08 09:40:44 -05:00
middleware-upgrade-guide.md Fix typo in error/middleware-upgrade-guide.md (#40176) 2022-09-02 18:20:22 +00:00
middleware-user-agent.md Fix typo for rewrites to rewrite. (#38000) 2022-06-24 15:45:02 -05:00
minification-disabled.md Prettier fix (#8754) 2019-09-16 15:24:42 +02:00
missing-document-component.md Improve Document Component Error (#17047) 2020-09-12 13:39:16 -04:00
missing-env-value.md Add initial process.env stubbing for new env support (#11893) 2020-04-15 02:42:37 -04:00
module-not-found.md Add Import trace for requested module when it fails to resolve (#27840) 2021-08-09 14:38:26 +02:00
multi-tabs.md Move syntax formatting to prettier (#7454) 2019-05-29 13:57:26 +02:00
nested-middleware.md Change Middleware error guide from .js to .ts. (#37858) 2022-06-20 21:56:19 +00:00
nested-reserved-page.md Add warning when reserved pages are nested (#13449) 2020-05-27 16:45:53 +00:00
nested-styled-jsx-tags.md next-swc: Improve error message for nested styled jsx tags (#33805) 2022-05-22 22:45:58 +00:00
next-config-error.md Ensure error message prints next.config.mjs (#30152) 2021-10-21 23:04:40 +00:00
next-dynamic-modules.md Upgrade to Prettier 2 (#13061) 2020-05-18 15:24:37 -04:00
next-export-no-build-id.md Clear up production build missing message for next start and next export (#19777) 2020-12-08 15:16:56 +00:00
next-export-serverless.md Move syntax formatting to prettier (#7454) 2019-05-29 13:57:26 +02:00
next-head-count-missing.md Revert "Remove next-head-count (#16758)" (#18713) 2020-11-10 16:35:47 -05:00
next-image-missing-loader-width.md Rename next/image dangerously-unoptimized to custom and warn when applicable (#26998) 2021-07-08 19:35:19 +00:00
next-image-missing-loader.md Rename next/image dangerously-unoptimized to custom and warn when applicable (#26998) 2021-07-08 19:35:19 +00:00
next-image-unconfigured-host.md Update next-image-unconfigured-host.md (#24953) 2021-07-19 19:40:52 -05:00
next-script-for-ga.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
next-start-serverless.md chore: Enable Alex documentation linting for error pages (#26526) 2021-06-23 23:33:58 -05:00
no-assign-module-variable.md Readds missing @next/next/no-assign-module-variable ESLint rule. (#38134) 2022-06-29 02:54:47 +00:00
no-before-interactive-script-outside-document.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-cache.md Move CI build cache instructions to Deployment docs (#35418) 2022-05-13 09:56:47 -04:00
no-css-tags.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-document-import-in-page.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-document-title.md Add warning when viewport meta tag is added to _document.js (#13452) 2020-07-07 01:43:16 -04:00
no-document-viewport-meta.md Replace zeit/next.js with vercel/next.js (#20849) 2021-01-07 08:41:04 -05:00
no-duplicate-head.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-head-element.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-head-import-in-document.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-html-link-for-pages.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-img-element.md fix(eslint): allow <img> in conjunction with <picture> (#37504) (#37570) 2022-06-15 21:13:52 -05:00
no-on-app-updated-hook.md Update references to zeit/next.js (#13463) 2020-05-27 17:51:11 -04:00
no-page-custom-font.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-router-instance.md expanded on No Router Instance (#21248) 2021-01-26 10:27:53 +00:00
no-script-component-in-head.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-script-in-document.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-script-tags-in-head-component.md Warn in dev mode when script tags are added with next/head (#33968) 2022-02-04 13:06:55 +00:00
no-server-import-in-page.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-styled-jsx-in-document.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-stylesheets-in-head-component.md Update wrong code snippet (#34520) 2022-02-18 10:03:27 +00:00
no-sync-scripts.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-title-in-document-head.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
no-unwanted-polyfillio.md Adds consistency to ESLint rules. (#34335) 2022-06-13 21:17:42 -05:00
node-module-in-edge-runtime.md feat: build edge functions with node.js modules and fail at runtime (#38234) 2022-07-06 20:54:44 +00:00
non-dynamic-getstaticpaths-usage.md Add error for getStaticPaths on non-dynamic page (#24188) 2021-04-18 09:31:40 +00:00
non-standard-node-env.md Better NODE_ENV explanation (#13476) 2020-05-28 09:10:22 +00:00
nonce-contained-invalid-characters.md Subresource Integrity for App Directory (#39729) 2022-09-08 15:17:15 -07:00
opening-an-issue.md Fix snippet language sh -> bash (#34487) 2022-02-17 11:05:40 -06:00
opt-out-auto-static-optimization.md docs: update links to docs site (#14305) 2020-06-18 09:54:07 +00:00
opt-out-automatic-prerendering.md docs: update links to docs site (#14305) 2020-06-18 09:54:07 +00:00
page-data-collection-timeout.md Fix broken data fetching links in docs (#33766) 2022-04-22 14:03:07 +02:00
page-without-valid-component.md docs: Add link to pageExtensions config in page-without-valid-component.md (#34285) 2022-02-14 17:25:45 +00:00
placeholder-blur-data-url.md Add support for AVIF to next/image (#29683) 2021-10-11 23:17:47 +00:00
popstate-state-empty.md Remove unused error (#15748) 2020-07-31 17:29:09 +00:00
postcss-function.md PostCSS Error When Exporting Function (#10242) 2020-01-23 15:39:50 -05:00
postcss-ignored-plugin.md docs: use descriptive links instead of "click here" (#25897) 2021-06-09 13:23:16 -05:00
postcss-shape.md docs: use descriptive links instead of "click here" (#25897) 2021-06-09 13:23:16 -05:00
prefetch-true-deprecated.md chore: Enable Alex documentation linting for error pages (#26526) 2021-06-23 23:33:58 -05:00
prerender-error.md Fix broken data fetching links in docs (#33766) 2022-04-22 14:03:07 +02:00
production-start-no-build-id.md Clear up production build missing message for next start and next export (#19777) 2020-12-08 15:16:56 +00:00
promise-in-next-config.md Add support for async fn / promise in next.config.js/.mjs (#33662) 2022-02-07 08:48:35 +00:00
public-next-folder-conflict.md Match public files priority in dev (#8641) 2019-09-16 23:06:30 +02:00
react-hydration-error.md Add additional fix in hydration error document (#40675) 2022-09-22 18:14:18 -07:00
react-version.md Update react-version.md (#26093) 2021-06-14 20:24:36 +00:00
render-no-starting-slash.md Add warning when a page is rendered without a starting / (#11418) 2020-04-06 11:54:42 -05:00
reserved-page-prop.md Update url prop handling for pages with new data methods (#10653) 2020-02-26 13:26:55 -05:00
returning-response-body-in-middleware.md Improve response body in Middleware error page. (#38537) 2022-07-18 20:20:23 -05:00
rewrite-auto-export-fallback.md Fixed duplicate data fetching overview page + links (#33774) 2022-01-29 02:52:40 +00:00
routes-must-be-array.md De-experimentalize custom-routes (#14602) 2020-06-27 09:18:18 +00:00
sharp-missing-in-production.md Add support for AVIF to next/image (#29683) 2021-10-11 23:17:47 +00:00
sharp-version-avif.md Add support for AVIF to next/image (#29683) 2021-10-11 23:17:47 +00:00
ssg-fallback-true-export.md Fix broken data fetching links in docs (#33766) 2022-04-22 14:03:07 +02:00
static-dir-deprecated.md chore: Enable Alex documentation linting for error pages (#26526) 2021-06-23 23:33:58 -05:00
static-page-generation-timeout.md Fixed duplicate data fetching overview page + links (#33774) 2022-01-29 02:52:40 +00:00
swc-disabled.md Add experimental flag to force SWC transforms (#36789) 2022-05-10 10:33:31 +00:00
swc-minify-enabled.md Move swcMinify out of experimental (#29810) 2021-10-25 13:49:11 +02:00
template.txt refactor: split up CONTRIBUTING.md (#40515) 2022-09-16 14:54:58 -07:00
threw-undefined.md Add util for normalizing errors (#33159) 2022-01-11 14:40:03 -06:00
undefined-webpack-config.md Error Message Clarity (#16052) 2020-12-01 15:58:52 -06:00
url-deprecated.md Remove unsupported examples (#26075) 2021-06-14 20:27:06 +02:00
webpack5.md Change using-preact example dependencies and docs (#30394) 2021-12-11 15:19:49 +01:00