react-data-table-hydration-bug
+
Repro of a hydration error in react-data-table-component's Pagination
element (github).
When the client window width is < 599px or undefined
(as during SSR), "rows per page" in the pagination footer is omitted. This causes a hydration error whenever the client window width is ≥599, as it is omitted on the server but rendered on the client.
-
+
Hydration error iff window.innerWidth < 599
-
Live demo
-
react-data-table-hydration-bug.runsascoded.com was built and deployed via GitHub Actions, and the error is visible in the dev console:
-
+
This page was built and deployed via GitHub Actions; if you refresh it when window.innerWidth < 599
, you'll see an error in the dev console:
+
Page source:
import DataTable from "react-data-table-component";
import ReactMarkdown from "react-markdown";
@@ -42,13 +41,13 @@ Live demo
at MessagePort.T (framework-5eea1a21a68cb00b.js:33:1894)
Local repro
-
Local dev mode gives more details about the error (namely that it occurs in a hierarchy like <nav>…<span>
in the pagination footer):
-
git clone https://github.com/ryan-williams/react-data-table-hydration-bug && cd react-data-table-hydration-bug
+If you clone the repo, 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):
+git clone https://github.com/runsascoded/react-data-table-hydration-bug && cd react-data-table-hydration-bug
pnpm install
npm run dev
localhost:3000 will show something like:
-
+
Error text:
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
@@ -64,4 +63,4 @@ Local repro
<span>
^^^^^^
-Commenting out the pagination
property avoids the issue; react-data-table-component#649 and this StackOverflow describe the same.