"React does not recognize the `isEmpty` prop on a DOM element" error in console with version 3.8.5

[willykurmann]

"React does not recognize the isEmpty prop on a DOM element" error in console with version 3.8.5

Expected Behavior

When landing on a page containing a mui-datatable component, there should be no error in the console.

Current Behavior

When landing on a page containing a mui-datatable component, the following error is visible:

Steps to Reproduce (for bugs)

1. Use a MuiDatable and MUIDataTableColumn components

Your Environment

Tech	Version
Material-UI	4.12.3
MUI-datatables	3.8.5
@types/mui-datatables	3.7.8
React	17.0.2
browser	latest versions of chrome, firefox and edge
NX	development

Update

After I built the app for production, the error isn't visible in the console. Might be something related to a development setting ?

[willykurmann]

BTW is MuiDatable a typo ?

[pintosack]

This is happening to me too, but I haven't tried in production yet.

[julianinsua]

This is happenning to me too. Most certainly the error not showing in production is due to webpack and babel hiding that from the user.

[molotow11]

Same for me

[zulmycortez]

Same here. I've recently added the library so it's on the most up to date version and using updated versions of React as well

[prabhatb111]

after changing mui datatable version warning gone "mui-datatables": "^4.1.2",

[filipomar]

If you, like me, cannot update to a version that fixes the issue here is a quick and dirty fix.

import { TableCell } from '@material-ui/core'

const oldRender = TableCell.render

TableCell.render = function (...args) {
    const [props, ...otherArgs] = args
    if (typeof props === 'object' && props && 'isEmpty' in props) {
        const { isEmpty, ...propsWithoutEmpty } = props
        return oldRender.apply(this, [propsWithoutEmpty, ...otherArgs])
    } else {
        return oldRender.apply(this, args)
    }
}

[Bhuvanesh-git331]

If you, like me, cannot update to a version that fixes the issue here is a quick and dirty fix.

import { TableCell } from '@material-ui/core'

const oldRender = TableCell.render

TableCell.render = function (...args) {
    const [props, ...otherArgs] = args
    if (typeof props === 'object' && props && 'isEmpty' in props) {
        const { isEmpty, ...propsWithoutEmpty } = props
        return oldRender.apply(this, [propsWithoutEmpty, ...otherArgs])
    } else {
        return oldRender.apply(this, args)
    }
}

Where to add this code?

[pintosack]

Can confirm that this is fixed in version 4.1.2. (we also upgraded React to v18)

[filipomar]

Where to add this code?

Anywhere before the rendering of the element, and it needs to be executed only once.

[lazarogandolfo]

I have the same error using mui-datatables": "^3.8.5" and "react": "^18.1.0". I updated mui-datatables to 4.2 but the table breaks in responsive mode. In version 3.8.5 when screen was small, each row was transformed into a columns, but with the latest version does not work anymore.

[kasanoppa]

Why don't you release the commit fixing this issue?

https://github.com/gregnb/mui-datatables/commit/af67b15c4e4b0621b23d3303276c1e5e54a14bf4

[kopach]

Another Workaround which doesn't affect the code of the app: With PNPM you can "path" problematic dependency using pnpm patch https://pnpm.io/cli/patch

So, what I did

1. cloned mui-datatables repo
2. switched to v 3.8.5
3. cherry-picked fix commit af67b15 (#1926)
4. built project with npm run build
5. copied output from dist
6. Applied that output into pnpm patch folder
7. executed pnpm patch-commit
8. Committed patch to repo

benefits: I don't pollute my source code with hacks. Once I upgrade to newer version of mui-datatables - I can easily remove path file