[data grid] useGridRootProps throw error in production, but not locally.

[arifannosh]

Order ID 💳

54600

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

It works fine on my local system when deployed the below error is occur:

2.75682452.chunk.js:2 MUI: GridErrorHandler - An unexpected error occurred. Error: MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component..  Error: MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component

Your environment 🌎

"@material-ui/core": "^4.11.4", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.58", "@mui/icons-material": "^5.6.2", "@mui/material": "^5.4.4", "@mui/x-data-grid-premium": "^5.17.12", npm 6.14.15 node v14.17.6

  chrome 

[flaviendelangle]

Hi,
Thanks for your contribution.

Could you provide a working reproduction, this Codesandbox template might be a good starting point.

[arifannosh]

@flaviendelangle plz check I just update Codesandbox template with my code

[arifannosh]

please have look Example

[arifannosh]

{/* } nonce={undefined} onResize={undefined} onResizeCapture={undefined} /> */}

  the custom toolbar creates an issue 

[joserodolfofreitas]

Hi @arifannosh,

I did a build (with yarn build) using the App.tsx on your example, and I couldn't reproduce the problem.
What's the process you're using to "deploy"?

[arifannosh]

yes @m4theushw it only gives an error on production, not on local or in a build

[joserodolfofreitas]

What do you mean by "production", @arifannosh? What's the process you're using to deploy your application?

[arifannosh]

@joserodolfofreitas and @flaviendelangle I just found a workaround
this is an issue with GridToolbarContainer and GridToolbar components of x-grid-premium. I import those two components for x-grid-pro it works fine for me now

[m4theushw]

I'm closing because we can't reproduce this problem.