[DataGrid] Maximum Call Stack Size exceeded for `createSelectorMemoized` #11483

laurisvan · 2023-12-20T17:37:37Z

Duplicates

I have searched the existing issues

Steps to reproduce 🕹

Link to live example:

Steps:

Open a page that has a DataGrid component with several column definitions

Current behavior 😯

Error: Maximum Call Stack Size exceeded

Expected behavior 🤔

No exception

Context 🔦

My sincere apologies that I am not able to provide good steps to repeat, as this problem only repeats on select end users that are non-technical ones. I can only see their blank screens in error reports, and this error in our TrackJS console (screenshot attached) which only tells that it has something to do with memoization calls.

I suspect it might have something to do with memoization of the fields and possible re-renderings. The DataGrids where the problem occurs, do have unique 'field' attributes within the columns, but I suspect there might be multiple DataGrids (having some conflicting field names) alive at the same time.

I am willing to upgrade to the latest MUI if there is even a slightest hint that something related to similar errors have been fixed since @mui/x-data-grid-premium: 6.9.0 (I am aware that there is one Maximum Call Stack Size Exceeded fix in 6.9.1. but I think it is unrelated as it dealt with fractional field widths).

I am willing to hunt for more information and try different things - please kindly give some tips on where to start the hunt.

Your environment 🌎

npx @mui/envinfo

Note: I am not able to repeat this problem personally. This problem only appears for some of our users, using a variant of Chrome on Windows (unfortunately I do not know the exact versions, but they are recent).

  System:
    OS: macOS 12.6
  Binaries:
    Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
    Yarn: Not Found
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.109
    Edge: Not Found
    Safari: 16.1
  npmPackages:
    @emotion/react:  11.10.5 
    @emotion/styled:  11.10.5 
    @mui/base:  5.0.0-alpha.106 
    @mui/core-downloads-tracker:  5.10.14 
    @mui/icons-material:  5.10.14 
    @mui/lab:  5.0.0-alpha.153 
    @mui/material:  5.10.14 
    @mui/private-theming:  5.14.18 
    @mui/styled-engine:  5.14.18 
    @mui/system:  5.14.18 
    @mui/types:  7.2.9 
    @mui/utils:  5.14.18 
    @mui/x-data-grid:  6.9.0 
    @mui/x-data-grid-premium:  6.9.0 
    @mui/x-data-grid-pro:  6.9.0 
    @mui/x-date-pickers:  5.0.8 
    @mui/x-date-pickers-pro:  5.0.8 
    @mui/x-license-pro:  6.9.0 
    @types/react:  18.0.25 
    react:  18.2.0 
    react-dom:  18.2.0 
    typescript: ^5.2.2 => 5.2.2 ```
</details>


**Search keywords**:

The text was updated successfully, but these errors were encountered:

michelengelen · 2023-12-21T13:20:25Z

Hey @laurisvan ... thanks for raising this. It is indeed a bit strange to see that error.

From your description it is not an easy task to determine where to initially look for tbh.
I will loop in our team here to see if we can find a solution for you soon.

@MBilalShafi or @romgrk Could you maybe have a hint or encountered this before?

romgrk · 2023-12-21T16:54:24Z

No, we don't have enough information here. We'd need to at least be able to see the code to better assess what's causing it. It would also be nice to have the full stack traces, that could also tell us what's causing it.

laurisvan · 2023-12-21T18:10:22Z

The innermost wrapper before DataGrid is as follows. The whole component structure is quite deep, so I am not sure how much more I can give without making the set of examples exhaustive:

import { GridColDef } from '@mui/x-data-grid-premium'

import { translate } from '$lib/locale'
import { formatDate } from '$lib/util/timeFormattingUtils'
import { DataGrid } from '$widgets/utils/DataGrid/DataGrid'
type RelationsListGridProps = {
  relationsList: { id: string; name: string; startsAt?: string; endsAt?: string | null }[]
  onCellClick: (relation: any) => void
}

export default function RelationsListGrid(props: RelationsListGridProps): React.ReactElement {
  const columns: GridColDef[] = [
    {
      field: 'name',
      headerName: translate('generic.name'),
      flex: 1,
      valueGetter: (params) => params.row.name
    },
    {
      field: 'parentName',
      headerName: translate('profile-details.dimension'),
      flex: 1,
      valueGetter: (params) => params.row.parentName
    },
    {
      field: 'startsAt',
      headerName: translate('generic.startsAt'),
      width: 150,
      valueGetter: (params) => formatDate(params.row.startsAt as string, { displayYear: true })
    },
    {
      field: 'endsAt',
      headerName: translate('generic.endsAt'),
      width: 150,
      valueGetter: (params) => formatDate(params.row.endsAt, { displayYear: true, renderAsExclusiveEndDate: true })
    },
    {
      field: 'selfEditable',
      headerName: translate('generic.selfEditable'),
      width: 150,
      valueGetter: (params) => (params.row.selfEditable ? translate('boolean.true') : '')
    }
  ]

  return (
    <DataGrid
      disableMultipleRowSelection
      checkboxSelection={false}
      onCellClick={props.onCellClick}
      columns={columns}
      rows={props.relationsList}
      initialState={undefined}
    />
  )
}

The whole widget tree is exhaustive, but I'll try to provide some bits from above and below the graph, just in case the structure gave any hints.

romgrk · 2023-12-21T18:49:30Z

I don't see anything unusual. Next step would be to get a full stack trace, including line numbers, so we can pinpoint where it's going wrong. The interesting data isn't just the last entry, it's the entries leading to the stack overflow.

laurisvan · 2023-12-21T19:30:28Z

Unfortunately I am not able to extract full stack trace, as TrackJS only provides a few traces. As soon as I am able to repeat the problem myself, I could give full information.

I am not sure if it gives any more insight, but all the reported browsers are Windows 10 Chromes, with either version 120.0 or 119.0. One of the users confirmed this does not repeat on Edge browser on the same Windows machine.

Here's what I am able to give:

obj ../../../node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js 23:10
Showing original source content from sourcemap
 if (visibility === 'public') {
   publicApi[methodName] = methods[methodName];
 } else {
   privateOnlyApi[methodName] = methods[methodName];
 }
 });
 };
 const handler = {
     get: (obj, prop) => {
       if (prop in obj) {
         return obj[prop];
       }
       return privateOnlyApi[prop];
     },
     set: (obj, prop, value) => {
         obj[prop] = value;
{anonymous} ../../../node_modules/@mui/x-data-grid/hooks/core/useGridStateInitialization.js 28:68
Showing original source content from sourcemap
 return false;
 }
 let ignoreSetState = false;
 
 // Apply the control state constraints
 const updatedControlStateIds = [];
 Object.keys(controlStateMapRef.current).forEach(stateId => {
       const controlState = controlStateMapRef.current[stateId];
       const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
       const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
       if (newSubState === oldSubState) {
         return;
       }
       updatedControlStateIds.push({
             stateId: controlState.stateId,
             hasPropChanged: newSubState !== controlState.propModel
{anonymous} ../../../node_modules/@mui/x-data-grid/hooks/core/useGridStateInitialization.js 26:44
Showing original source content from sourcemap
 }
 if (apiRef.current.state === newState) {
   return false;
 }
 let ignoreSetState = false;
 
 // Apply the control state constraints
 const updatedControlStateIds = [];
 Object.keys(controlStateMapRef.current).forEach(stateId => {
       const controlState = controlStateMapRef.current[stateId];
       const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
       const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
       if (newSubState === oldSubState) {
         return;
       }
       updatedControlStateIds.push({
fn ../../../node_modules/@mui/x-data-grid/hooks/utils/useGridApiMethod.js 14:19
Showing original source content from sourcemap
 if (!privateApiRef.current) {
   return;
 }
 apiMethodsNames.forEach(methodName => {
   if (!privateApiRef.current.hasOwnProperty(methodName)) {
     privateApiRef.current.register(visibility, {
       [methodName]: (...args) => {
         const fn = apiMethodsRef.current[methodName];
         return fn(...args);
       }
     });
   }
 });
 }, [apiMethodsNames, privateApiRef, visibility]);
 React.useEffect(() => {
       apiMethodsRef.current = apiMethods;
{anonymous} ../../../node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js 48:19
Showing original source content from sourcemap
 stateId: 'visibleColumns',
   propModel: props.columnVisibilityModel,
   propOnChange: props.onColumnVisibilityModelChange,
   stateSelector: gridColumnVisibilityModelSelector,
   changeEvent: 'columnVisibilityModelChange'
 });
 const setGridColumnsState = React.useCallback(columnsState => {
   logger.debug('Updating columns state.');
   apiRef.current.setState(mergeColumnsState(columnsState));
   apiRef.current.forceUpdate();
   apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
 }, [logger, apiRef]);
 
 /**
  * API METHODS
  */
setGridColumnsState ../../../node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js 249:6
Showing original source content from sourcemap
 /**
  * EVENTS
  */
 const prevInnerWidth = React.useRef(null);
 const handleGridSizeChange = viewportInnerSize => {
   if (prevInnerWidth.current !== viewportInnerSize.width) {
     prevInnerWidth.current = viewportInnerSize.width;
     setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef.current.state), viewportInnerSize.width));
   }
 };
 useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
 
 /**
  * APPLIERS
  */
SNe.p ../../../node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js 33:92
Showing original source content from sourcemap
 const subscription = React.useRef(null);
 const handlerRef = React.useRef();
 handlerRef.current = handler;
 const cleanupTokenRef = React.useRef(null);
 if (!subscription.current && handlerRef.current) {
   const enhancedHandler = (params, event, details) => {
     if (!event.defaultMuiPrevented) {
       var _handlerRef$current;
       (_handlerRef$current = handlerRef.current) == null ? void 0 : _handlerRef$current.call(handlerRef, params, event, details);
     }
   };
   subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
   cleanupTokensCounter += 1;
   cleanupTokenRef.current = {
     cleanupToken: cleanupTokensCounter
   };
SNe.emit ../../../node_modules/@mui/x-data-grid/utils/EventManager.js 57:17
Showing original source content from sourcemap
 const listener = highPriorityListeners[i];
 if (collection.highPriority.has(listener)) {
   listener.apply(this, args);
 }
 }
 for (let i = 0; i < regularListeners.length; i += 1) {
   const listener = regularListeners[i];
   if (collection.regular.has(listener)) {
     listener.apply(this, args);
   }
 }
 }
 once(eventName, listener) {
     // eslint-disable-next-line consistent-this
     const that = this;
     this.on(eventName, function oneTimeListener(...args) {
{anonymous} ../../../node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js 67:39
Showing original source content from sourcemap
 const [name, params, event = {}] = args;
 event.defaultMuiPrevented = false;
 if (isSyntheticEvent(event) && event.isPropagationStopped()) {
   return;
 }
 const details = props.signature === GridSignature.DataGridPro ? {
   api: privateApiRef.current.getPublicApi()
 } : {};
 privateApiRef.current.eventManager.emit(name, params, event, details);
 }, [privateApiRef, props.signature]);
 const subscribeEvent = React.useCallback((event, handler, options) => {
       privateApiRef.current.eventManager.on(event, handler, options);
       const api = privateApiRef.current;
       return () => {
         api.eventManager.removeListener(event, handler);
       };

michelengelen · 2024-01-03T14:26:04Z

@mui/xgrid do we have someone with a similar setup (windows 10, chrome v119 or v120 and edge) to test this?

romgrk · 2024-01-03T14:51:59Z

I could boot in windows 11 to try it.

@laurisvan I just noticed that you're on an older version of the grid, could you try the latest 6.x version?

github-actions · 2024-01-10T16:27:30Z

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

laurisvan · 2024-01-19T12:58:58Z

We just got fresh insight from the problem and actually managed to fix the problem. When checking the problem, we had multiple nested overflowing items (causing multiple nested scrollbars). We anticipated the triple scrollbars were the cause of the problem, and fixed them. As a result, the problem no longer appears.

If you are interested, I can try to fish for more information. I believe it is still related to MUI, but not specifically to DataGrid.

romgrk · 2024-01-19T15:14:49Z

If you find more detailed information you can post here or in the main MUI repository if applicable, but it's also fine to close it and wait until someone has a clear & reproducible case.

kavitang · 2024-04-10T17:23:33Z

Also facing this after migrating to v7. It happens on a few pages in the app, and there are two places where this error is being thrown

Error 1

eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/gridSortingSelector.js (14:54)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (64:0)
dependenciesChecker
(app-pages-browser)/node_modules/reselect/es/index.js (77:0)
memoized
(app-pages-browser)/node_modules/reselect/es/defaultMemoize.js (123:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (91:0)
dependenciesChecker
(app-pages-browser)/node_modules/reselect/es/index.js (77:0)
memoized
(app-pages-browser)/node_modules/reselect/es/defaultMemoize.js (123:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (91:0)
dependenciesChecker
(app-pages-browser)/node_modules/reselect/es/index.js (77:0)
memoized
(app-pages-browser)/node_modules/reselect/es/defaultMemoize.js (123:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (91:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (63:0)
applySelector
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridSelector.js (12:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridSelector.js (39:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/Store.js (19:0)
Set.forEach
<anonymous>
Store.update
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/Store.js (19:0)
Object.eval [as setState]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridStateInitialization.js (55:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (65:0)
eval
node_modules/@mui/utils/useEventCallback/useEventCallback.js (18:17)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (189:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (51:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)
Object.handleGridSizeChange [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (247:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (191:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (51:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)
Object.handleGridSizeChange [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (247:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as updateDimensions]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (191:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid-pro/esm/hooks/features/detailPanel/useGridDetailPanel.js (155:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as applySorting]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (102:0)
Object.eval [as setSortModel]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (111:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (221:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)

Error 2 trace

gridVisibleRowsLookupSelector
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/filter/gridFilterSelector.js (27:7)
dependenciesChecker
(app-pages-browser)/node_modules/reselect/es/index.js (77:0)
memoized
(app-pages-browser)/node_modules/reselect/es/defaultMemoize.js (123:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (91:0)
dependenciesChecker
(app-pages-browser)/node_modules/reselect/es/index.js (77:0)
memoized
(app-pages-browser)/node_modules/reselect/es/defaultMemoize.js (123:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (91:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (63:0)
applySelector
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridSelector.js (12:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridSelector.js (39:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/Store.js (19:0)
Set.forEach
<anonymous>
Store.update
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/Store.js (19:0)
Object.eval [as setState]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridStateInitialization.js (55:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (65:0)
eval
node_modules/@mui/utils/useEventCallback/useEventCallback.js (18:17)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (189:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (51:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)
Object.handleGridSizeChange [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (247:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (191:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (51:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)
Object.handleGridSizeChange [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (247:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as updateDimensions]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (191:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid-pro/esm/hooks/features/detailPanel/useGridDetailPanel.js (155:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as applySorting]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (102:0)
Object.eval [as setSortModel]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (111:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (221:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)
Object.handleGridSizeChange [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (247:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)

Not able to replicate this yet, as our app serves a lot of settings dynamically in the Datagrid, but this issue has only occured after migrating to v7. I'll try and create a sandbox for this, but I wanted to add this is not resolved. If I should open a new issue for this please let me know I will do so.

romgrk · 2024-04-25T11:27:04Z

@kavitang Could you provide a reproduction case?

https://stackblitz.com/fork/github/mui/mui-x/tree/master/bug-reproductions/x-data-grid

jameslibertas · 2024-04-27T18:30:22Z

+1 on this error. It started happening out of the blue today for me.

gridFilterSelector.js:27 Uncaught RangeError: Maximum call stack size exceeded
at gridVisibleRowsLookupSelector (gridFilterSelector.js:27:1)
at dependenciesChecker (index.js:77:1)
at memoized (defaultMemoize.js:123:1)
at selector (createSelector.js:91:1)
at dependenciesChecker (index.js:77:1)
at memoized (defaultMemoize.js:123:1)
at selector (createSelector.js:91:1)
at selector (createSelector.js:63:1)
at applySelector (useGridSelector.js:12:1)
at useGridSelector.js:39:1

From experimenting with it the vertical viewing range of the grid is a factor. Depending on the height grid when the browser is made shorter or taller the error will manifest. If I make the grid smaller the error will show up. If I make the browser taller and the grid expands, the error may not manifest.

Once you pass the threshold where the vertical height will need a scroll bar the error will occur.

kavitang · 2024-04-29T16:55:54Z

@romgrk - It is very hard to create a reproduction of this as the data grid in our app has a lot of dynamic properties. The one area I was able to narrow down here was to remove the setting of the sortModel. In the app, we fetch some config and then set sortModel after a delay (we also set the columns dynamically multiple times depending on different config). Removing this caused the error to go away, but I'm not able to replicate this issue in a sandbox. I'll give it another try and post back in a day or so.

sorinpav · 2024-05-02T12:57:09Z

We're affected by this issue as well, and it's the sortModel that causes it for us as well.

We use both server-side and client-side sorting, depending on different scenarios we have in our product.

I see it being a problem only when doing server-side sorting, and only when removing the previously used sorting filter.

e.g.
Say you have a "First Name" column that uses server side sorting.
First click on the arrow in the column header - sort by First Name ascending - sorting works all fine
Second click - sort by First Name descending - sorting works all fine
Third click - get back to unsorted values - error shows and project breaks (maximum call stack size exceeded)

This also appears to not happen if we have multiple columns sorting, it happens only when sorting is fully removed (all columns are back to unsorted).

Needless to say, it used to work all fine prior to upgrading to v7.3.1.

Hope this helps. I can try to provide some snippets if needed.

github-actions · 2024-05-02T15:06:15Z

The issue has been inactive for 7 days and has been automatically closed.

jameslibertas · 2024-05-02T15:18:17Z

Can this be reopened? This is definitely still an issue.

kavitang · 2024-05-02T15:22:16Z

Yes, this is still an issue, and I have been unable to create a reproduction of this so far. I have had to comment out the sortModel to get this to work. I'll try with the replica sandbox once more over the weekend and update if I'm successful. Please let me know if there is any other specific information I can provide to help debug this in the meanwhile.

romgrk · 2024-05-02T17:55:09Z

We need more information at the moment. If someone can get us a runnable code example that showcases the exact options you're using, that would help a lot as the options can affect the behavior of the grid substantially so it's hard to debug without that.

gaisdav · 2024-05-10T10:49:25Z

I was able to get rid of the error when I rewrote the sortModel logic as in this example and used the useCallback hook for the onSortModelChange method.

jameslibertas · 2024-05-10T11:41:31Z

I was able to get rid of the error when I rewrote the sortModel logic as in this example and used the useCallback hook for the onSortModelChange method.

Reviewing this pointed out to me that we had a bug in that we were sorting based on a field name that didn't exist (typo in the name). Sharing in case that is helpful in adding code protection for that.

cherniavskii · 2024-05-10T16:59:04Z

@gaisdav Can you share more details about your setup so we can reproduce the issue and potentially fix it on the Data Grid side?

cherniavskii · 2024-05-10T17:01:17Z

@jameslibertas

Reviewing this pointed out to me that we had a bug in that we were sorting based on a field name that didn't exist (typo in the name). Sharing in case that is helpful in adding code protection for that.

I'm unable to reproduce the issue by sorting on the non-existing field: https://stackblitz.com/edit/react-jcxukq?file=Demo.tsx
Was there anything else you changed to fix the error?

gaisdav · 2024-05-10T17:05:52Z

@cherniavskii yes, I'll try to do it on Monday. In our project we have a large table with a lot of properties. It won't be that easy.

Thinkscape · 2024-05-14T08:13:11Z

Have a try with my repro for #13122 - https://stackblitz.com/edit/github-gbfkio?file=src%2Fdemo.tsx

Is this similar to what you're encountering?

gaisdav · 2024-05-14T09:42:11Z

@cherniavskii Hi, I tried yesterday to reproduce the error in an empty project in codesandbox, but I couldn't.
The old code was something like this, a bit similar to what @Thinkscape showed above.

const { ..., orderBy, orderDest, changeSorting } = props;

const handleSortModelChange = (sortModel: GridSortModel) => {
        // adapter which adapted the sortModel format to {orderBy, orderDest} or default values, if sortModel is empty
       changeSorting(adaptedSortModel)
  
}

<DataGridPro
    ...
    sortModel={[{ field: orderBy, sort: orderDest }]}
    onSortModelChange={handleSortModelChange}
    ...
/>

I changed it to

  const { ..., orderBy, orderDest, changeSorting } = props;

  const [sortModel, setSortModel] = React.useState<GridSortModel>([
        {
            field: orderBy,
            sort: orderDest,
        },
  ])

  useEffect(() => {
        if (sortModel.length) {
            props.changeSorting({
                orderBy: sortModel[0].field,
                orderDest: sortModel[0].sort,
            })
        }
    }, [sortModel])
    
    const handleSortModelChange = useCallback((_sortModel: GridSortModel) => {
        setSortModel(_sortModel)
    }, [])

<DataGridPro
    ...
    sortModel={sortModel}
    onSortModelChange={handleSortModelChange}
    ...
/>

these changes helped me.

By the way, I got an error when I changed the page and returned back to the page with the table.

I hope that I could help at least a little to understand the problem, although I myself did not fully understand what the problem was 😅

oussamaAbdelwahed · 2024-05-29T15:39:41Z

Hello , the issue seems to appear when the value of the 'field property doesn't match any of the columns 'field' property values (basically when using a field property value in sortModel that doesn't exist inside the array of columns)

Thinkscape · 2024-05-30T05:40:44Z

If that's the case, maybe we should have a quick validation routine at the init to check if referenced columns exist, before any other functionality is triggered?

romgrk · 2024-05-31T02:49:27Z

I can reproduce the issue with the repro above from @Thinkscape, I'll work on this one next week.

laurisvan added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 20, 2023

zannager transferred this issue from mui/material-ui Dec 21, 2023

zannager added the component: data grid This is the name of the generic UI component, not the React module! label Dec 21, 2023

michelengelen changed the title ~~Maximum Call Stack~~ [DataGrid] Maximum Call Stack Size exceeded for createSelectorMemoized Dec 21, 2023

michelengelen added bug 🐛 Something doesn't work support: commercial Support request from paid users labels Dec 21, 2023

romgrk added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 21, 2023

github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Dec 21, 2023

romgrk added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 21, 2023

github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Dec 21, 2023

michelengelen added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 3, 2024

github-actions bot closed this as completed Jan 10, 2024

github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Jan 19, 2024

github-actions bot reopened this Jan 19, 2024

laurisvan closed this as completed Jan 19, 2024

github-actions bot removed the status: waiting for author Issue with insufficient information label Jan 19, 2024

cherniavskii reopened this Apr 10, 2024

romgrk added the status: waiting for author Issue with insufficient information label Apr 25, 2024

github-actions bot closed this as completed May 2, 2024

romgrk removed the status: waiting for author Issue with insufficient information label May 2, 2024

romgrk reopened this May 2, 2024

cherniavskii mentioned this issue May 9, 2024

[DataGrid] Fix Maximum call stack size exceeded error when using fractional width #9516

Merged

1 task

Thinkscape mentioned this issue May 14, 2024

[data grid] detail panel + sortModel causes "Maximum call stack size exceeded" #13122

Closed

romgrk added the support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/ label May 31, 2024

romgrk self-assigned this May 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Maximum Call Stack Size exceeded for `createSelectorMemoized` #11483

[DataGrid] Maximum Call Stack Size exceeded for `createSelectorMemoized` #11483

laurisvan commented Dec 20, 2023 •

edited by github-actions bot

Loading

michelengelen commented Dec 21, 2023

romgrk commented Dec 21, 2023

laurisvan commented Dec 21, 2023 •

edited

Loading

romgrk commented Dec 21, 2023

laurisvan commented Dec 21, 2023 •

edited

Loading

michelengelen commented Jan 3, 2024

romgrk commented Jan 3, 2024

github-actions bot commented Jan 10, 2024

laurisvan commented Jan 19, 2024

romgrk commented Jan 19, 2024

kavitang commented Apr 10, 2024

romgrk commented Apr 25, 2024

jameslibertas commented Apr 27, 2024 •

edited

Loading

kavitang commented Apr 29, 2024 •

edited

Loading

sorinpav commented May 2, 2024 •

edited

Loading

github-actions bot commented May 2, 2024

jameslibertas commented May 2, 2024

kavitang commented May 2, 2024

romgrk commented May 2, 2024

gaisdav commented May 10, 2024

jameslibertas commented May 10, 2024

cherniavskii commented May 10, 2024

cherniavskii commented May 10, 2024

gaisdav commented May 10, 2024

Thinkscape commented May 14, 2024

gaisdav commented May 14, 2024

oussamaAbdelwahed commented May 29, 2024 •

edited

Loading

Thinkscape commented May 30, 2024

romgrk commented May 31, 2024

[DataGrid] Maximum Call Stack Size exceeded for createSelectorMemoized #11483

[DataGrid] Maximum Call Stack Size exceeded for createSelectorMemoized #11483

Comments

laurisvan commented Dec 20, 2023 • edited by github-actions bot Loading

Duplicates

Steps to reproduce 🕹

Current behavior 😯

Expected behavior 🤔

Context 🔦

Your environment 🌎

michelengelen commented Dec 21, 2023

romgrk commented Dec 21, 2023

laurisvan commented Dec 21, 2023 • edited Loading

romgrk commented Dec 21, 2023

laurisvan commented Dec 21, 2023 • edited Loading

michelengelen commented Jan 3, 2024

romgrk commented Jan 3, 2024

github-actions bot commented Jan 10, 2024

laurisvan commented Jan 19, 2024

romgrk commented Jan 19, 2024

kavitang commented Apr 10, 2024

romgrk commented Apr 25, 2024

jameslibertas commented Apr 27, 2024 • edited Loading

kavitang commented Apr 29, 2024 • edited Loading

sorinpav commented May 2, 2024 • edited Loading

github-actions bot commented May 2, 2024

jameslibertas commented May 2, 2024

kavitang commented May 2, 2024

romgrk commented May 2, 2024

gaisdav commented May 10, 2024

jameslibertas commented May 10, 2024

cherniavskii commented May 10, 2024

cherniavskii commented May 10, 2024

gaisdav commented May 10, 2024

Thinkscape commented May 14, 2024

gaisdav commented May 14, 2024

oussamaAbdelwahed commented May 29, 2024 • edited Loading

Thinkscape commented May 30, 2024

romgrk commented May 31, 2024

[DataGrid] Maximum Call Stack Size exceeded for `createSelectorMemoized` #11483

[DataGrid] Maximum Call Stack Size exceeded for `createSelectorMemoized` #11483

laurisvan commented Dec 20, 2023 •

edited by github-actions bot

Loading

laurisvan commented Dec 21, 2023 •

edited

Loading

laurisvan commented Dec 21, 2023 •

edited

Loading

jameslibertas commented Apr 27, 2024 •

edited

Loading

kavitang commented Apr 29, 2024 •

edited

Loading

sorinpav commented May 2, 2024 •

edited

Loading

oussamaAbdelwahed commented May 29, 2024 •

edited

Loading