search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.06k stars 1.26k forks source link

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") #8953

Open timokasa opened 1 year ago

timokasa commented 1 year ago

Order ID or Support key 💳 (optional)

62148

Duplicates

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".

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: https://github.com/mui/mui-x/issues/5317 https://github.com/mui/mui-x/issues/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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 4 months ago

It's similar to #6951 and #9807.

Any solution to this issue?