Recommended way how to bundle a ui library with mui datagridpro to be used in react.js/next.js projects (Concerning Error: "MUI: useGritRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component")

[timokasa]

Order ID or Support key 💳 (optional)

62148

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Hi,

We use the DataGridPro in our private UI library wrapped as BgDataGrid. We want to use it as a dependency in our React.js and Next.js apps. The properties of BgDataGrid are passed straight down to DataGridPro.
We are using rollup as a bundler for the UI library. We want to make the BgDataGrid be extensible within React.js and Next.js using the slots.

Problem:
We imported our UI Library and use BgDataGrid, where we wanted to set the GridToolbar using the slot props. (GridToolbar
imported also from x-data-grid-pro) We got:
"MUI: useGritRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component".

• GridToolbar is from the correct import and it is passed throug BgDataGrid eventually down to DataGridPro inside the UI library.
• It seems the context is not initialized correctly. Maybe is our rollup configuration wrong?

Can you point us in the right direction, please?
I am guessing, it has something to do with the bundler, because when using only typescript compiler (tsc) for the UI library it works.
Do you have any recommendation for working bundler configuration for our use case? It does not need to be rollup, it could be any other bundler.

Note to other issues:
#5317
#6951
-> not relevant, we use only the x-data-grid-pro imports, we are not mixing pro and community imports. Our problem happens, only when the library is exported and used. In storybook, when to library is used directly from within the project it works fine.

Thank you,
Best regards
Timo

Your environment 🌎

System:
OS: Windows 10 10.0.19044
Binaries:
Node: 16.19.1 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
@emotion/react: ^11.10.6 => 11.10.6
@emotion/styled: ^11.10.6 => 11.10.6
@mui/base: 5.0.0-alpha.125
@mui/core-downloads-tracker: 5.12.0
@mui/icons-material: ^5.11.16 => 5.11.16
@mui/material: ^5.12.0 => 5.12.0
@mui/private-theming: 5.12.0
@mui/styled-engine: 5.12.0
@mui/system: 5.12.0
@mui/types: 7.2.4
@mui/utils: 5.12.0
@mui/x-data-grid: 6.2.0
@mui/x-data-grid-pro: ^6.2.0 => 6.2.0
@mui/x-license-pro: 6.0.4
@types/react: ^18.0.35 => 18.0.35
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.9.5 => 4.9.5

Using Chrome

[MBilalShafi]

To understand more the problem, can you try producing a minimal reproduction example in some codesandbox or possibly a git repo (because you can't share your code as it's private, or can you?), it seems the problem might be related to how the components are being used or the environment where they are being used have duplicate dependencies.
In any case, it's not possible to pin-point the problem without a reproduction example, so it'll be great if you can provide one.

[timokasa]

Hi,

it took me a little bit longer but here is a repo which reproduces the problem.
https://github.com/timokasa/mui-ui-lib-react-next/tree/main

It consists of 2 projects ui-library and react-app.

The error is caused in react-app in App.tsx when using BgDataGrid from ui-library and using GridToolbar as slot component. Without GridToolbar the app runs just fine.

I hope this helps. Let me know if you need any further info.

Thank you!

[Sakrafux]

Hi,
the problem seems to be that rollup is including the relevant mui parts in its export.
Using both the library and mui at the same time seems to use different context in the background and therefore causing the error.

[guicara]

It's similar to #6951 and #9807.

Any solution to this issue?

[guicara]

Hi,

I agree with @Sakrafux, it seems to be a context issue.

By the way, we also have a context issue (which is, in my opinion, identical) described in #14918.

Could you please take a look at our reproduction case? The error is thrown when using GridToolbarQuickFilter (and probably with other props).

https://github.com/Seb-GRAF/data-grid-issue

We have a MUI X Premium license. Here is our support key / order ID: 96178. Ticket 23052 created.

Thanks

[timokasa]

Hi,

yes it was the context issue.

@guicara , I think your problem is here in App.tsx:

import { StyledDataGrid } from '@seb-graf/design-system';
import { GridColDef, GridRowsProp, GridToolbarQuickFilter } from '@mui/x-data-grid-premium';

It uses different DataGrid Context. One ist from @seb-graf/design-system/node_modules/@mui/x-data-grid-premium and one directly from @mui/x-data-grid-premium.

You must re-export the GridToolbarQuickFilter from design-system package.
So you can import it from the same package like this:

import { StyledDataGrid, GridToolbarQuickFilter  } from '@seb-graf/design-system';
import { GridColDef, GridRowsProp } from '@mui/x-data-grid-premium';

GridColDef and GridRowProps dont use the Context, so it does not matter.

It can be done e.g. by including following export in your desing-system lib and reference it in the main index.ts file:

export { GridToolbarQuickFilter  } from '@mui/x-data-grid-premium';

hope this helps