TableTreeExpandButton Element type is invalid

KNagarjuna commented 1 year ago

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 commented 1 year ago

error-issue

KNagarjuna commented 1 year ago

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 (

); }; `

RiodeJaneiroo commented 1 year ago

the same error here sandbox

RiodeJaneiroo commented 1 year ago

and when we use grouping then we got error - sandbox

github-actions[bot] commented 1 year ago

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.

DevExpress / devextreme-reactive

TableTreeExpandButton Element type is invalid #3616

Here are my code: