I am using ReactDOM to render my React components (React Data Grid) but it is giving an error saying : TypeError: Cannot read property 'length' of undefined within the useViewPortRows.ts TypeScript file of the grid. I have checked my code and I do not refer to any length property anywhere. How do I render my React Data Grid on to the screen?
Here's the error log output:
TypeError: Cannot read property 'length' of undefined
(anonymous function)
C:/kilostep_material/src/hooks/useViewportRows.ts:31
28 | expandedGroupIds
29 | }: ViewportRowsArgs<R>) {
30 | const [groupedRows, rowsCount] = useMemo(() => {
> 31 | if (groupBy.length === 0 || !rowGrouper) return [undefined, rawRows.length];
32 |
33 | const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[], startRowIndex: number): [GroupByDictionary<R>, number] => {
34 | let groupRowsCount = 0;
View compiled
▶ 3 stack frames were collapsed.
useViewportRows
C:/kilostep_material/src/hooks/useViewportRows.ts:30
27 | rowGrouper,
28 | expandedGroupIds
29 | }: ViewportRowsArgs<R>) {
> 30 | const [groupedRows, rowsCount] = useMemo(() => {
31 | if (groupBy.length === 0 || !rowGrouper) return [undefined, rawRows.length];
32 |
33 | const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[], startRowIndex: number): [GroupByDictionary<R>, number] => {
View compiled
DataGrid
C:/kilostep_material/src/DataGrid.tsx:268
265 | rawGroupBy: rowGrouper ? rawGroupBy : undefined
266 | });
267 |
> 268 | const { rowOverscanStartIdx, rowOverscanEndIdx, rows, rowsCount, isGroupRow } = useViewportRows({
| ^ 269 | rawRows,
270 | groupBy,
271 | rowGrouper,
View compiled
▶ 17 stack frames were collapsed.
Module.<anonymous>
C:/kilostep_material/kilostep/src/index.js:49
46 | }
47 |
48 | const rootElement = document.getElementById("root");
> 49 | ReactDOM.render(<Example />, rootElement);
50 |
51 |
View compiled
Module../src/index.js
http://localhost:3001/static/js/main.chunk.js:205:30
__webpack_require__
C:/kilostep_material/kilostep/webpack/bootstrap:851
848 |
849 | __webpack_require__.$Refresh$.init();
850 | try {
> 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 852 | } finally {
853 | __webpack_require__.$Refresh$.cleanup(moduleId);
854 | }
View compiled
fn
C:/kilostep_material/kilostep/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3001/static/js/main.chunk.js:311:18
__webpack_require__
C:/kilostep_material/kilostep/webpack/bootstrap:851
848 |
849 | __webpack_require__.$Refresh$.init();
850 | try {
> 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 852 | } finally {
853 | __webpack_require__.$Refresh$.cleanup(moduleId);
854 | }
View compiled
checkDeferredModules
C:/kilostep_material/kilostep/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
C:/kilostep_material/kilostep/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:3001/static/js/main.chunk.js:1:69
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.
And here's the output from my browser's Developer Console:
index.js:1 The above error occurred in the <ForwardRef(DataGrid)> component:
at DataGrid (http://localhost:3001/static/js/0.chunk.js:4736:12)
at Example (http://localhost:3001/static/js/main.chunk.js:83:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
react-dom.development.js:23275 Uncaught TypeError: Cannot read property 'length' of undefined
at useViewportRows.ts:31
at mountMemo (react-dom.development.js:15846)
at Object.useMemo (react-dom.development.js:16219)
at useMemo (react.development.js:1532)
at useViewportRows (useViewportRows.ts:30)
at DataGrid (DataGrid.tsx:268)
at renderWithHooks (react-dom.development.js:14985)
at updateForwardRef (react-dom.development.js:17044)
at beginWork (react-dom.development.js:19098)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
at workLoopSync (react-dom.development.js:22707)
at renderRootSync (react-dom.development.js:22670)
at performSyncWorkOnRoot (react-dom.development.js:22293)
at scheduleUpdateOnFiber (react-dom.development.js:21881)
at updateContainer (react-dom.development.js:25482)
at react-dom.development.js:26021
at unbatchedUpdates (react-dom.development.js:22431)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
at Object.render (react-dom.development.js:26103)
at Module.<anonymous> (index.js:49)
at Module../src/index.js (index.js:50)
at __webpack_require__ (bootstrap:851)
at fn (bootstrap:150)
at Object.1 (styles.css?3fab:82)
at __webpack_require__ (bootstrap:851)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
This is how my index.js file looks :
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from "react-data-grid";
import "./styles.css";
const columns = [
{ key: "id", name: "ID", editable: true },
{ key: "title", name: "Title", editable: true },
{ key: "complete", name: "Complete", editable: true }
];
const rows = [
{ id: 0, title: "Task 1", complete: 20 },
{ id: 1, title: "Task 2", complete: 40 },
{ id: 2, title: "Task 3", complete: 60 }
];
class Example extends React.Component {
state = { rows };
onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
this.setState(state => {
const rows = state.rows.slice();
for (let i = fromRow; i <= toRow; i++) {
rows[i] = { ...rows[i], ...updated };
}
return { rows };
});
};
render() {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => this.state.rows[i]}
rowsCount={3}
onGridRowsUpdated={this.onGridRowsUpdated}
enableCellSelect={true}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);
I copied paste this code straight from the SimpleGrid example of adazzle's React Data Grid which works fine on its Sandbox.
This is my package.json file :
{
"name": "kilostep",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.21.1",
"proxy": "http://localhost:3000",
"react": "^17.0.1",
"react-data-grid": "^7.0.0-canary.37",
"react-data-grid-addons": "^7.0.0-alpha.24",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/react-dom": "^17.0.2"
}
}
