window is not defined after upgrade to v4 (mui-v5)

[ozzyonfire]

I upgraded to v4 and tried to load the page - I'm getting a "window is not defined" error. This is running on a NextJS project (SSR).

Expected Behavior

Table should load properly, even on SSR.

Current Behavior

Page crashes.
ReferenceError: window is not defined at load (C:\Users\matto\Development\projects\tpl\node_modules\mui-datatables\dist\index.js:242:40) at new o (C:\Users\matto\Development\projects\tpl\node_modules\mui-datatables\dist\index.js:246:23382) at processChild (C:\Users\matto\Development\projects\tpl\node_modules\react-dom\cjs\react-dom-server.node.development.js:3305:14) at resolve (C:\Users\matto\Development\projects\tpl\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (C:\Users\matto\Development\projects\tpl\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (C:\Users\matto\Development\projects\tpl\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29) at renderToString (C:\Users\matto\Development\projects\tpl\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27) at renderPage (C:\Users\matto\Development\projects\tpl\node_modules\next\dist\next-server\server\render.js:53:854) at Object.ctx.renderPage (C:\Users\matto\Development\projects\tpl\.next\server\pages\_document.js:1214:26) at Function.getInitialProps (C:\Users\matto\Development\projects\tpl\.next\server\pages\_document.js:556:19)

Inspecting the code I get an error at this line.
var load=function(e){return JSON.parse(window.localStorage.getItem(e))};

Steps to Reproduce (for bugs)

1. Next JS Project
2. Upgrade to mui5 and mui-datatables v4
3. Load a page

Your Environment

Tech	Version
Material-UI	5.0.4
MUI-datatables	4.0.0
React	17.0.2
browser	chrome - 94.0.4606.81
NextJS	11

[Cirelion]

It's literally unusable and blocking for my team due to this issue. Can this please be picked up with prio? Otherwise we'll be forced to move away from this and create our own.

[ozzyonfire]

Ya the radio silence on this issue does not bode well. Easily verifyable. Just clone the example repo from the mui project with nextjs (https://github.com/mui-org/material-ui/tree/master/examples/nextjs) install the mui-datatables project and try to load an example table...

I forked the project and tried to identify one of the issues (loading and saving the localstorage)...

in load.js

export const load = storageKey => {
  if (typeof window !== 'undefined') {
    return JSON.parse(window.localStorage.getItem(storageKey));
  }
};

in save.js

export const save = (storageKey, state) => {
  const { selectedRows, data, displayData, ...savedState } = state;
  if (typeof window !== 'undefined') {
    window.localStorage.setItem(storageKey, JSON.stringify(savedState));
  }
};

Naively I thought this would work... I was able to get it to build and run in dev mode. However, I couldn't get the tests to run at all (mocha). and importing this as a package to a local test project resulted in even more errors. I think it has to do with some theme.breakpoints.down lines that seem broken. #1805 seems related to this.

[ozzyonfire]

For what it's worth, I was able to get my project working again after downgrading mui-datatables to 3.7.7 and installing @material-ui/core@4.11.4 and @material-ui/icons@4.11.0. Some styles are still broken, but at least I'm back to compiling and development.

[Cirelion]

Any update or time estimation on this? @wdh2100

[ralphhaynes]

A temporary work around I got working (oversimplified to only show the relevant parts):

import { Suspense } from 'react'
import dynamic from 'next/dynamic'
const MUIDataTable = dynamic(() => import('mui-datatables'), { suspense: true, ssr: false })

const DataTable = tableProps => (
  <Suspense fallback={<div className='loader' />}>
    <MUIDataTable {...tableProps} />
  </Suspense>
)

Something like that, but should help with some ideas to work with until it's fixed. Using Next.JS dynamic components might not be necessary if you aren't using Next.

Could maybe also try using useState/useEffect something like this:

const DataTable = tableProps => {
  const [ready, setReady] = useState(false)

  useEffect(() => {
    setReady(true)
  }, [])
	
  return (
    <>
      {ready && <MUIDataTable {...tableProps} />}
    </>
  )
}

Either way just find a way to make sure the MUIDataTable doesn't load server side.

[liamlows]

I also found this issue when using Next.JS. I think because the code is rendered on the server side and has no access to window, it throws an undefined. To conditionally render the content only when the page is actually loaded on the client's web browser you can also do:

const DataTable = tableProps => {
  return (
    <ThemeProvider theme={createTheme()}>
      {typeof window !== 'undefined' && <MUIDataTable {...tableProps} />}
    </ThemeProvider>
  )
}

and it should work well too. This was tested using @mui version 5.1 @DataTables version 4.

[mahmoud2802]

I have same Issue .
How can I fix That?

[zeknox]

+1 having the same issue with nextjs

[wdh2100]

@ozzyonfire @Cirelion @zeknox @mahmoud2802 @liamlows @ralphhaynes

Forgive me for being late.

fixed : #1870

• v4 : 3.8.4
• v3 : 4.1.2

[liamlows]

Awesome just tested it out in v4 and all looks good to me! Not sure on v3 but if someone would like to speak to that this could probably be closed now @ozzyonfire

[busches]

I can confirm this is fixed in V3 as well.