TableTreeExpandButton Element type is invalid

[KNagarjuna]

Hi ,
We are using the DevExpress for tree table,
I am getting following error while loading the page.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of TableTreeExpandButton.

But I was remove 'TableTreeColumn' component from "@devexpress/dx-react-grid-material-ui" then it was working.

Here are my deps:

{
"name": "consent_ui",
"version": "3.0.0",
"private": true,
"dependencies": {
"@auth0/auth0-spa-js": "^1.19.2",
"@devexpress/dx-react-core": "^4.0.0",
"@devexpress/dx-react-grid": "^4.0.0",
"@devexpress/dx-react-grid-material-ui": "^4.0.0",
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.1.1",
"@mui/lab": "^5.0.0-alpha.55",
"@mui/material": "^5.0.6",
"@mui/styles": "^5.10.16",
"@mui/x-data-grid": "^5.17.14",
"@reduxjs/toolkit": "^1.9.1",
"autosuggest-highlight": "^3.2.0",
"axios": "^0.24.0",
"babel-polyfill": "^6.26.0",
"clsx": "^1.1.1",
"cp-react-tree-table": "^1.1.1",
"cross-fetch": "^3.1.4",
"date-fns": "^2.29.3",
"echarts": "^5.2.2",
"echarts-for-react": "^3.0.2",
"formik": "^2.2.9",
"highcharts": "^10.3.2",
"highcharts-react-official": "^3.1.0",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.19",
"lodash.clonedeep": "^4.5.0",
"merge": "^2.1.1",
"moment": "^2.29.1",
"notistack": "^2.0.3",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-material-ui-form-validator": "^3.0.0",
"react-multi-select-component": "^4.3.4",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "^4.0.3",
"react-toastify": "^8.0.0",
"redux": "^4.1.2",
"redux-thunk": "^2.4.0",
"rsuite": "^5.23.2",
"shortid": "^2.2.16",
"yup": "^0.32.11"
},

Can you please help the issue.
Thank you.

[KNagarjuna]

[KNagarjuna]

Here are my code:

`import React, { useState } from "react";
import Paper from "@mui/material/Paper";

import { TreeDataState, CustomTreeData } from "@devexpress/dx-react-grid";
import {
Grid,
Table,
TableHeaderRow,
TableTreeColumn,
} from "@devexpress/dx-react-grid-material-ui";

import { generateRows, defaultColumnValues } from "./dummyData/generator";

const getChildRows = (row, rootRows) => (row ? row.items : rootRows);

export default () => {
const [columns] = useState([
{ name: "name", title: "Name" },
{ name: "gender", title: "Gender" },
{ name: "city", title: "City" },
{ name: "car", title: "Car" },
]);
const [data] = useState(
generateRows({
columnValues: {
...defaultColumnValues,
items: ({ random }) =>
random() > 0.5
? generateRows({
columnValues: {
...defaultColumnValues,
items: () =>
random() > 0.5
? generateRows({
columnValues: {
...defaultColumnValues,
},
length: Math.trunc(random() * 5) + 1,
random,
})
: null,
},
length: Math.trunc(random() * 3) + 1,
random,
})
: null,
},
length: 3,
})
);
const [tableColumnExtensions] = useState([
{ columnName: "name", width: 300 },
]);

return (

    <TableTreeColumn for="name" className="" />
  </Grid>
</Paper>

);
};
`

[Vadim Zmiievskyi]

the same error
here sandbox

[Vadim Zmiievskyi]

and when we use grouping then we got error - sandbox

[github-actions]

Thank you for using Devextreme Reactive. We use GitHub issues to track bug and feature requests. We process incoming issues as soon as possible. Issues that have been inactive for 30 days are closed. If you have an active DevExtreme license, you can contact us in our Support Center for updates. Otherwise, post your question on StackOverflow.