-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Deploying to gh-pages from @ 565d82e 🚀
- Loading branch information
1 parent
f17cd2e
commit c841b95
Showing
7 changed files
with
11 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>404: This page could not be found</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/af246ff78f8e1721.css" as="style"/><link rel="stylesheet" href="/_next/static/css/af246ff78f8e1721.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-f164db4954bac6ec.js" defer=""></script><script src="/_next/static/chunks/framework-5eea1a21a68cb00b.js" defer=""></script><script src="/_next/static/chunks/main-bfd2c0bca62d7673.js" defer=""></script><script src="/_next/static/chunks/pages/_app-3150fad2affca479.js" defer=""></script><script src="/_next/static/chunks/pages/_error-66ac8ca5e5676424.js" defer=""></script><script src="/_next/static/t0yMVUPzgM0axwy1J5vyF/_buildManifest.js" defer=""></script><script src="/_next/static/t0yMVUPzgM0axwy1J5vyF/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div style="font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div style="line-height:48px"><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding-right:23px;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:28px">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"t0yMVUPzgM0axwy1J5vyF","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html> | ||
| <!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>404: This page could not be found</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/af246ff78f8e1721.css" as="style"/><link rel="stylesheet" href="/_next/static/css/af246ff78f8e1721.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-f164db4954bac6ec.js" defer=""></script><script src="/_next/static/chunks/framework-5eea1a21a68cb00b.js" defer=""></script><script src="/_next/static/chunks/main-bfd2c0bca62d7673.js" defer=""></script><script src="/_next/static/chunks/pages/_app-3150fad2affca479.js" defer=""></script><script src="/_next/static/chunks/pages/_error-66ac8ca5e5676424.js" defer=""></script><script src="/_next/static/jtJTAxHDzhfwvHKpTl_9a/_buildManifest.js" defer=""></script><script src="/_next/static/jtJTAxHDzhfwvHKpTl_9a/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div style="font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div style="line-height:48px"><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding-right:23px;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:28px">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"jtJTAxHDzhfwvHKpTl_9a","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {"pageProps":{"readme":"# react-data-table-hydration-bug\nRepro of a [hydration error][react#418] in [react-data-table-component]'s [`Pagination` element][PaginationWrapper] ([github]).\n\n[When the client window width][shouldShow] is < [599px][`SMALL`] or `undefined` (as during [SSR]), \"rows per page\" in the pagination footer [is omitted][shouldShows]. This causes a hydration error whenever the client window width is ≥599, as it is omitted on the server but rendered on the client.\n\n[![][error.gif]][error.gif]\n\n*Hydration error iff `window.innerWidth < 599`*\n\nThis page was built and deployed [via GitHub Actions][GHA]; if you refresh it when `window.innerWidth < 599`, you'll see an error in the dev console:\n\n[![][console-error.png]][console-error.png]\n\n[Page source][index.tsx]:\n\n```tsx\nimport DataTable from \"react-data-table-component\";\nimport ReactMarkdown from \"react-markdown\";\nimport fs from \"fs\";\n\nexport function getStaticProps() {\n return { props: { readme: fs.readFileSync(\"README.md\").toString() } }\n}\n\nconst Index = ({ readme }: { readme: string }) =>\n <div className={\"markdown-body\"}>\n <ReactMarkdown>{readme}</ReactMarkdown>\n <hr />\n <DataTable\n columns={[ { name: \"Str\" }, { name: \"Num\" } ]}\n data={[ { Str: \"A\", Num: 1 } ]}\n // This line causes a hydration error in the pagination footer \"nav\" element (iff the\n // browser window is ≥599px wide); commenting this line fixes it.\n pagination\n />\n </div>\n\nexport default Index\n```\n\nThe error in the dev console links to [react#418]:\n```\nUncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.\n at lg (framework-5eea1a21a68cb00b.js:9:46336)\n at i (framework-5eea1a21a68cb00b.js:9:121103)\n at oD (framework-5eea1a21a68cb00b.js:9:99070)\n at framework-5eea1a21a68cb00b.js:9:98937\n at oO (framework-5eea1a21a68cb00b.js:9:98944)\n at ox (framework-5eea1a21a68cb00b.js:9:93983)\n at x (framework-5eea1a21a68cb00b.js:33:1364)\n at MessagePort.T (framework-5eea1a21a68cb00b.js:33:1894)\n```\n\n## Local repro\nIf you clone [the repo][github], dev mode gives more details about the error (namely that it occurs in a hierarchy like `<nav>…<span>` in react-data-table-component's [pagination footer][PaginationWrapper]):\n\n```bash\ngit clone https://github.com/runsascoded/react-data-table-hydration-bug && cd react-data-table-hydration-bug\npnpm install\nnpm run dev\n```\n\n[localhost:3000] will show something like:\n\n[![][hydration-error.png]][hydration-error.png]\n\nError text:\n\n```\nUnhandled Runtime Error\nError: Hydration failed because the initial UI does not match what was rendered on the server.\nSee more info here: https://nextjs.org/docs/messages/react-hydration-error\n\nExpected server HTML to contain a matching <span> in <nav>.\n\n...\n <O>\n <nav>\n ^^^^^\n <O>\n <span>\n ^^^^^^\n```\n\nCommenting out [the `pagination` property] avoids the issue; [react-data-table-component#649] and [this StackOverflow][SO] describe the same.\n\n\n[react-data-table-component]: https://github.com/jbetancur/react-data-table-component\n[localhost:3000]: http://localhost:3000\n\n[react#418]: https://react.dev/errors/418?invariant=418\n\n[react-data-table-hydration-bug.runsascoded.com]: https://react-data-table-hydration-bug.runsascoded.com\n[GHA]: https://github.com/runsascoded/react-data-table-hydration-bug/actions\n[PaginationWrapper]: https://github.com/jbetancur/react-data-table-component/blob/v7.6.2/src/DataTable/Pagination.tsx#L20-L30\n\n[shouldShow]: https://github.com/jbetancur/react-data-table-component/blob/v7.6.2/src/DataTable/Pagination.tsx#L98\n[`SMALL`]: https://github.com/jbetancur/react-data-table-component/blob/v7.6.2/src/DataTable/media.ts\n[shouldShows]: https://github.com/jbetancur/react-data-table-component/blob/v7.6.2/src/DataTable/Pagination.tsx#L145-L151\n[SSR]: https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering\n\n[SO]: https://stackoverflow.com/q/75068071\n[react-data-table-component#649]: https://github.com/jbetancur/react-data-table-component/issues/649\n\n[//]: # (gh repo links)\n[index.tsx]: https://github.com/runsascoded/react-data-table-hydration-bug/blob/main/pages/index.tsx\n[the `pagination` property]: https://github.com/runsascoded/react-data-table-hydration-bug/blob/main/pages/index.tsx#L17\n[github]: https://github.com/runsascoded/react-data-table-hydration-bug\n\n[//]: # (images)\n[error.gif]: error.gif\n[console-error.png]: console-error.png\n[hydration-error.png]: hydration-error.png\n"},"__N_SSG":true} |
This file was deleted.
Oops, something went wrong.
File renamed without changes.
File renamed without changes.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.