Server Error ReferenceError: document is not defined

[rullah0202]

Everything is fine. Whenever Pagination property set true then error occurred. Using dependency

"bootstrap": "^5.0.2",
"next": "11.0.1",
"nextjs-progressbar": "0.0.11",
"react": "17.0.2",
"react-bootstrap": "^2.0.0-beta.4",
"react-data-table-component": "^7.0.0-rc2",
"react-dom": "17.0.2",
"recharts": "^2.0.10",
"styled-components": "^5.3.0"

Here is the error

[jbetancur]

Ugh yea. document which is a client side browser construct is used by the built in pagination component as well as when using selectableRows. RDT was not designed with SSR in mind. I'll need to do some research on how to make sure document is defined, perhaps a check to do so. Any ideas on that would move this along, but that is essentially the culprit.

[jeffdc]

I just spent several days porting over to this library and have had good results with it. All was great until I got to the very last table, it needs pagination. Yep I am using SSR via next.js. So here I am...

You can check for document like this:

if (typeof window === 'object') {
    ... use document here
}

My hack around this for now is to check for the presence of document as above, and then to set the pagination property conditionally based on this. So this renders as not paginated on the server but paginated on the client.

[jbetancur]

@jeffdc thank you this is helpful. I'll fix in the next version 7-rc4 soon.

[jbetancur]

A fix for this is now available in 7.0.0-rc4. The fix was to implement a check for window.document and move RTL logic into a React hook.

Please let me know if this resolves the issue as I don't have a nextjs environment setup at the moment. What I am not able to test is if RTL still works completely in SSR scenarios.

[jeffdc]

It seems to work but I have a new warning from the server-side that may or may not be a result of this change. I think that it is probably not from this change but will let you know once I figure it out. Thanks for the quick fix.

The warning is:
Warning: Expected server HTML to contain a matching <span> in <nav>.

[jeffdc]

The warning does come from this component. It only shows up when I have pagination on. So the change does introduce this warning but fixes the previous error. It seems to originate in styled-components. I found this SO post which talks about a similar issue.

The stack for the warning:

react-dom.development.js?61bb:67 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:19450)
    at nav
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19450)
    at jt (webpack-internal:///./node_modules/react-data-table-component/dist/index.cjs.js:1:38681)
    at div
    at Ge (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:17005)
    at eval (webpack-internal:///./node_modules/react-data-table-component/dist/index.cjs.js:1:45053)
    at div
    at eval (webpack-internal:///./node_modules/react-bootstrap/esm/Col.js:18:23)
    at div
    at eval (webpack-internal:///./node_modules/react-bootstrap/esm/Row.js:20:23)
    at div
    at eval (webpack-internal:///./node_modules/react-bootstrap/esm/Col.js:18:23)
    at div
    at eval (webpack-internal:///./node_modules/react-bootstrap/esm/Row.js:20:23)
    at div
    at eval (webpack-internal:///./node_modules/react-bootstrap/esm/Container.js:19:23)
    at Host (webpack-internal:///./pages/host/[id]/index.tsx:100:19)
    at ConfirmationServiceProvider (webpack-internal:///./hooks/useconfirmation.tsx:43:23)
    at div
    at eval (webpack-internal:///./node_modules/react-bootstrap/esm/Col.js:18:23)
    at div
    at eval (webpack-internal:///./node_modules/react-bootstrap/esm/Row.js:20:23)
    at div
    at eval (webpack-internal:///./node_modules/react-bootstrap/esm/Container.js:19:23)
    at Provider (webpack-internal:///./node_modules/next-auth/dist/client/index.js:584:24)
    at Gallformers (webpack-internal:///./pages/_app.tsx:41:24)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:289:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:785:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:924:25)