0

I wanted to create datatables with react-data-table-component, but the pagination keep generating the error: Error: Hydration failed because the initial UI does not match what was rendered on the server.

I am just using their basic original code from their site:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import DataTable from 'react-data-table-component';



// A super simple expandable component.
const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;

const columns = [
  {
    name: 'Title',
    selector: row => row.title,
  },
  {
    name: 'Year',
    selector: row => row.year,
  },
];

const data = [
  {
    id: 1,
    title: 'Beetlejuice',
    year: '1988',
  },
  {
    id: 2,
    title: 'Ghostbusters',
    year: '1984',
  },
  {
    id: 3,
    title: 'Ghostbusters3',
    year: '1985',
  },
  {
    id: 4,
    title: 'Ghostbusters4',
    year: '1986',
  },
]





export default function Home() {

  return (

      <DataTable
          title="Movie List"
          columns={columns}
          data={data}
          pagination
      />

  )

}

If pagination was removed from <DataTable /> the errors will be gone

Note: If you are wondering why I do not have a https://codesandbox.io/ because https://codesandbox.io/ is a JOKE, I cannot even create a new next-js test project there because the project wont initialize ( https://codesandbox.io/s/kind-sunset-8oxfnd?file=/pages/index.js )

console error here:

next-dev.js?3515:20 
        
       Warning: Expected server HTML to contain a matching <span> in <nav>.
    at span
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19750)
    at nav
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19750)
    at eval (webpack-internal:///./node_modules/react-data-table-component/dist/index.cjs.js:396:40)
    at div
    at Fe (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:17299)
    at eval (webpack-internal:///./node_modules/react-data-table-component/dist/index.cjs.js:396:6011)
    at Home
    at MyApp (webpack-internal:///./pages/_app.js:9:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:61:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:171:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:346:11)
window.console.error @ next-dev.js?3515:20
printWarning @ react-dom.development.js?ac89:86
error @ react-dom.development.js?ac89:60
warnForInsertedHydratedElement @ react-dom.development.js?ac89:10499
didNotFindHydratableInstance @ react-dom.development.js?ac89:11458
warnNonhydratedInstance @ react-dom.development.js?ac89:12385
tryToClaimNextHydratableInstance @ react-dom.development.js?ac89:12534
updateHostComponent @ react-dom.development.js?ac89:19902
beginWork @ react-dom.development.js?ac89:21618
beginWork$1 @ react-dom.development.js?ac89:27426
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25738
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
react-dom.development.js?ac89:12507 
        
       Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?ac89:12507:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?ac89:12535:1)
    at updateHostComponent (react-dom.development.js?ac89:19902:1)
    at beginWork (react-dom.development.js?ac89:21618:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4213:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4277:1)
    at beginWork$1 (react-dom.development.js?ac89:27451:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25738:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
throwOnHydrationMismatch @ react-dom.development.js?ac89:12507
tryToClaimNextHydratableInstance @ react-dom.development.js?ac89:12535
updateHostComponent @ react-dom.development.js?ac89:19902
beginWork @ react-dom.development.js?ac89:21618
callCallback @ react-dom.development.js?ac89:4164
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4213
invokeGuardedCallback @ react-dom.development.js?ac89:4277
beginWork$1 @ react-dom.development.js?ac89:27451
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25738
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
next-dev.js?3515:20 
        
       Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>. 

See more info here: https://nextjs.org/docs/messages/react-hydration-error
window.console.error @ next-dev.js?3515:20
printWarning @ react-dom.development.js?ac89:86
error @ react-dom.development.js?ac89:60
errorHydratingContainer @ react-dom.development.js?ac89:11473
recoverFromConcurrentError @ react-dom.development.js?ac89:25846
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25750
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
5react-dom.development.js?ac89:12507 
        
       Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?ac89:12507:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?ac89:12535:1)
    at updateHostComponent (react-dom.development.js?ac89:19902:1)
    at beginWork (react-dom.development.js?ac89:21618:1)
    at beginWork$1 (react-dom.development.js?ac89:27426:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25738:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
throwOnHydrationMismatch @ react-dom.development.js?ac89:12507
tryToClaimNextHydratableInstance @ react-dom.development.js?ac89:12535
updateHostComponent @ react-dom.development.js?ac89:19902
beginWork @ react-dom.development.js?ac89:21618
beginWork$1 @ react-dom.development.js?ac89:27426
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25738
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
react-dom.development.js?ac89:19849 
        
       Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js?ac89:19849:1)
    at beginWork (react-dom.development.js?ac89:21615:1)
    at beginWork$1 (react-dom.development.js?ac89:27426:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at recoverFromConcurrentError (react-dom.development.js?ac89:25850:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25750:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
    ```
yeln
  • 462
  • 2
  • 10
  • 23

2 Answers2

0

Based to this answer, I'm suspecting your ExpandedComponent to be creating conflict. Can you try with something simpler, like just a string ?

Franck Grall
  • 41
  • 2
  • seems the `ExpandedComponent` is not even used, how is it even possible it caused the errors? I removed it, the error still persist – yeln Jan 10 '23 at 09:54
  • the errors totally does not MAKE ANY SENSE, there is no `getStaticProps` or `getServerSideProps` AT ALL – yeln Jan 10 '23 at 09:55
  • You don't have any more warnings in the console ? – Franck Grall Jan 10 '23 at 09:56
  • think there is 3x console errors, added to the end of the question – yeln Jan 10 '23 at 10:02
  • 1
    ```Warning: Expected server HTML to contain a matching in – Franck Grall Jan 10 '23 at 11:25
0

Here's the work-around solution about it:

1- add a "loading" state. and some component for showing during this "loading" before rendering the table

2- add useEffect and set this "loading" state to false.

  // state
  const [loader, setLoader] = useState(true);
  // effect
  useEffect(() => {
    setLoader(false);
  }, []);

  // render
  if (loader) {
    return <div>Loading</div>;
  }
  return <DataTable pagination columns={columns} data={data} />;
Erel Çolak
  • 1
  • 1