mui-x [data grid] nextjs 15 params used synchronously

Steps to reproduce

Create a nextjs 15 app router project with MUI 7 and data grid (versions used: [email protected], @mui/[email protected], @mui/[email protected])
put a data grid on a route with a param (e.g. .../[projectId]/page.ts)
visit the page and observe errors

Current behavior

Any usage of data grid results in multiple errors, seemingly from synchronous usage of params when data grid tries to stringify the MUI theme:

Error: params are being enumerated. `params` should be unwrapped with `React.use()` before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at createConsoleError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/errors/console-error.js:27:71)
    at handleConsoleError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/errors/use-error-handler.js:47:54)
    at console.error (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/globals/intercept-console-error.js:47:57)
    at warnForEnumeration (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/request/params.browser.dev.js:67:17)
    at Object.ownKeys (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/request/params.browser.dev.js:52:13)
    at JSON.stringify (<anonymous>)
    at stringify (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-internals/esm/hash/stringify.js:12:15)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-data-grid/esm/material/variables.js:19:140)
    at mountMemo (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:7744:23)
    at Object.useMemo (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:23264:18)
    at exports.useMemo (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react/cjs/react.development.js:1219:34)
    at Object.useMaterialCSSVariables [as useCSSVariables] (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-data-grid/esm/material/variables.js:18:45)
    at GridCSSVariablesContext (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-data-grid/esm/utils/css/context.js:38:36)
    at GridContextProvider (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-data-grid/esm/context/GridContextProvider.js:37:90)
    at DataGridPremium (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-data-grid-premium/esm/DataGridPremium/DataGridPremium.js:95:80)
    at Component (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-internals/esm/forwardRef/forwardRef.js:16:32)
...

Error: A param property was accessed directly with `params.projectId`. `params` is now a Promise and should be unwrapped with `React.use()` before accessing properties of the underlying params object. In this version of Next.js direct access to param properties is still supported to facilitate migration but in a future version you will be required to unwrap `params` with `React.use()`.
    at createConsoleError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/errors/console-error.js:27:71)
    at handleConsoleError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/errors/use-error-handler.js:47:54)
    at console.error (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/globals/intercept-console-error.js:47:57)
    at warnForSyncAccess (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/request/params.browser.dev.js:60:13)
    at Object.get (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/request/params.browser.dev.js:40:21)
    at JSON.stringify (<anonymous>)
    at stringify (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-internals/esm/hash/stringify.js:12:15)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-data-grid/esm/material/variables.js:19:140)
    at mountMemo (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:7744:23)
    at Object.useMemo (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:23264:18)
    at exports.useMemo (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react/cjs/react.development.js:1219:34)
    at Object.useMaterialCSSVariables [as useCSSVariables] (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-data-grid/esm/material/variables.js:18:45)
    at GridCSSVariablesContext (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-data-grid/esm/utils/css/context.js:38:36)
    at GridContextProvider (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-data-grid/esm/context/GridContextProvider.js:37:90)
    at DataGridPremium (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-data-grid-premium/esm/DataGridPremium/DataGridPremium.js:95:80)
    at Component (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-internals/esm/forwardRef/forwardRef.js:16:32)
...

(and more)

Currently it still renders, but will break in the future according to nextjs documentation.

Expected behavior

DataGrid should render without errors being thrown.

Context

Only trying to mount a DataGrid in a nextjs 15 application.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.3.1
  Binaries:
    Node: 23.7.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 135.0.7049.115
    Edge: Not Found
    Safari: 18.3
  npmPackages:
    @emotion/react: ^11.11.1 => 11.14.0 
    @emotion/styled: ^11.11.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.0.2 
    @mui/lab: ^7.0.0-beta.11 => 7.0.0-beta.11 
    @mui/material: ^7.0.2 => 7.0.2 
    @mui/material-nextjs: ^7.0.2 => 7.0.2 
    @mui/private-theming:  6.4.9 
    @mui/styled-engine:  7.0.2 
    @mui/styles: ^6.3.0 => 6.4.8 
    @mui/system:  7.0.2 
    @mui/types:  7.4.1 
    @mui/utils:  7.0.2 
    @mui/x-data-grid:  8.2.0 
    @mui/x-data-grid-premium: ^8.2.0 => 8.2.0 
    @mui/x-data-grid-pro:  8.2.0 
    @mui/x-date-pickers: ^8.2.0 => 8.2.0 
    @mui/x-internals:  8.2.0 
    @mui/x-license:  8.2.0 
    @mui/x-telemetry:  8.2.0 
    @types/react: ^19.1.2 => 19.1.2 
    react: ^19.1.0 => 19.1.0 
    react-dom: ^19.1.0 => 19.1.0 
    styled-components: ^6.0.0 => 6.1.17 
    typescript: ^5.5.4 => 5.8.3

Search keywords: next, nextjs, next15, params, searchParams

May 04 '25 19:05 realChesta

Same here (next v15.3.1, mui v7.0.2 & mui-x v8.2)

The keys of 'searchParams' were accessed directly. 'searchParams' should be unwrapped with 'React.use()' before accessing its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

params are being enumerated. 'params' should be unwrapped with 'React.use()' before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

Happening in all pages with a DataGrid

May 05 '25 11:05 lorisgiraudo

Hi @realChesta, did you found any solution to this?

May 14 '25 07:05 lorisgiraudo

Hi @realChesta, did you found any solution to this?

no, we moved back to next 14 for now as we're in no rush to upgrade and we'd rather be on the safe side for now.

May 14 '25 12:05 realChesta

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

May 19 '25 09:05 michelengelen

Ok so I might have isolated the problem, I will provide a minimal reproducible example as soon as i can. The problem go away as soon as I comment these 3 linees of code: icon: <CheckBoxOutlineBlankRoundedIcon sx={{ color: "hsla(210, 0%, 0%, 0.0)" }} />, checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />

inside the input.tsx file taken from this repo: https://github.com/mui/material-ui/blob/2043d80c60774ab8a623634ea3619a73ab39e0ca/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx#L316

I really don't know why and how a customization file can trigger those errors

May 20 '25 13:05 lorisgiraudo

This issue has been inactive for 7 days. Please remove the stale label or leave a comment to keep it open. Otherwise, it will be closed in 5 days.

May 28 '25 03:05 github-actions[bot]

This issue has been closed due to 5 days of inactivity after being marked stale.

Jun 02 '25 03:06 github-actions[bot]

On my side I managed to resolve the issue. When I create a brand-new Next.js 15 project with MUI X DataGrid 8.5.3 and add the most basic DataGrid example from the docs, I see no errors.

The problem in my real project turned out to be something wrapping every page (I’m using a custom Next.js theme via <ThemeComponent>).

My theme was applying component overrides for all MUI components, but only two of them were triggering those mysterious error messages: Radio and Checkbox, which both included React icons in their defaultProps:

// Checkbox override defaultProps: { icon: <Icon />, checkedIcon: <CheckedIcon />, indeterminateIcon: <IndeterminateIcon />, },

// Radio override defaultProps: { icon: <Icon />, checkedIcon: <CheckedIcon />, },

Solution: I simply removed those defaultProps. The components’ visuals now differ slightly, but it’s no big deal. I couldn’t find a better workaround.

The original error messages weren’t at all clear about what was going on, which made troubleshooting really difficult.

Jun 20 '25 12:06 log7422

Hello @oliviertassinari , I’m facing the same issue after updating to Next.js 15 with the App Router. As @log7422 and @lorisgiraudo mentioned, the problem occurs when we try to use a ReactNode as an icon for one of the components inside the theme:

components: {
   MuiAlert: {
      defaultProps: {
        iconMapping: {
          success: <CheckCircleIcon />,
          error: <AlertIcon />,
          warning: <WarningTriangleIcon />,
          info: <InformationIcon />,
        },
      }
   }
}

Any idea about what might causing this?

createConsoleError
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/src/next-devtools/shared/console-error.ts (16:35)
handleConsoleError
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/src/next-devtools/userspace/app/errors/use-error-handler.ts (35:31)
console.error
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/src/next-devtools/userspace/app/errors/intercept-console-error.ts (33:27)
warnForEnumeration
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/src/client/request/params.browser.dev.ts (140:13)
Object.ownKeys
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/src/client/request/params.browser.dev.ts (59:7)
JSON.stringify
<anonymous>
stringify
../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@mui/x-internals/esm/hash/stringify.js (8:15)
useMaterialCSSVariables.useMemo
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emot_179c2cacaae69bae9506573ecc0c0cec/node_modules/@mui/x-data-grid/esm/material/variables.js (9:30)
mountMemo
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (7868:23)
Object.useMemo
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (23894:18)
exports.useMemo
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react/cjs/react.development.js (1238:34)
Object.useMaterialCSSVariables [as useCSSVariables]
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emot_179c2cacaae69bae9506573ecc0c0cec/node_modules/@mui/x-data-grid/esm/material/variables.js (8:23)
GridCSSVariablesContext
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emot_179c2cacaae69bae9506573ecc0c0cec/node_modules/@mui/x-data-grid/esm/utils/css/context.js (33:36)
Object.react_stack_bottom_frame
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (23583:20)
renderWithHooks
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (6792:22)
updateFunctionComponent
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (9246:19)
beginWork
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (10857:18)
runWithFiberInDEV
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (871:30)
performUnitOfWork
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (15726:22)
workLoopSync
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (15546:41)
renderRootSync
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (15526:11)
performWorkOnRoot
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14990:13)
performSyncWorkOnRoot
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (16830:7)
flushSyncWorkAcrossRoots_impl
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (16676:21)
flushSpawnedWork
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (16273:9)
commitRoot
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (15997:9)
commitRootWhenReady
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (15227:7)
performWorkOnRoot
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (15146:15)
performWorkOnRootViaSchedulerTask
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (16815:7)
MessagePort.performWorkUntilDeadline
../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_react-_3cceab951d1c70133f8dbd270ac94292/node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (45:48)
GridContextProvider
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emot_179c2cacaae69bae9506573ecc0c0cec/node_modules/@mui/x-data-grid/esm/context/GridContextProvider.js (25:40)
DataGrid
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emot_179c2cacaae69bae9506573ecc0c0cec/node_modules/@mui/x-data-grid/esm/DataGrid/DataGrid.js (34:27)
Component
../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@mui/x-internals/esm/forwardRef/forwardRef.js (10:32)

Aug 31 '25 17:08 ahmedkhitaby