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/
3.92k stars 1.19k forks source link

[question] Multiple versions of @mui/x-data-grid on the same project. #13690

Open lchiesa-sw opened 4 days ago

lchiesa-sw commented 4 days ago

The problem in depth

In our project we have a microfrontend structure with the single-spa framework. For this, we have a container application and the different microfrontends for the different sections of the page.

Within these microfrontends we are using the community version (@mui/x-data-grid) while in a specific microfrontend (let's call it mf1) we need to use (@mui/x-data-grid-premium).

In principle we would like not to have to change all microfrontends to use @mui/x-data-grid-premium.

The problem we are having is that when the application bundle is created both packages are loaded (@mui/x-data-grid and @mui/x-data-grid-premium).

Once we want to use in our microfrontend (mf1) we get this error:

Uncaught Error: MUI X: Could not find the data grid context. It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component. This can also happen if you are bundling multiple versions of the data grid.

Your environment

`npx @mui/envinfo` System: OS: macOS 14.1.1 Binaries: Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm pnpm: Not Found Browsers: Chrome: 126.0.6478.127 Edge: Not Found Safari: 17.1 npmPackages: @emotion/react: ^11.11.1 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.20 @mui/icons-material: ^5.11.11 => 5.15.20 @mui/lab: ^5.0.0-alpha.167 => 5.0.0-alpha.170 @mui/material: ^5.14.18 => 5.15.20 @mui/private-theming: 5.15.20 @mui/styled-engine: 5.15.14 @mui/styled-engine-sc: ^5.14.12 => 5.14.12 @mui/system: 5.15.20 @mui/types: 7.2.14 @mui/utils: 5.15.20 @mui/x-data-grid: 6.20.1 @mui/x-data-grid-generator: ^6.18.2 => 6.20.1 @mui/x-data-grid-premium: ^7.8.0 => 7.8.0 @mui/x-data-grid-pro: 7.8.0 @mui/x-date-pickers: ^6.18.5 => 6.20.2 @mui/x-license: ^7.7.1 => 7.8.0 @mui/x-license-pro: 6.10.2 @types/react: 17.0.80 react: ^17.0.0 || ^18.0.0 => 17.0.2 react-dom: ^17.0.0 || ^18.0.0 => 17.0.2 styled-components: ^5.3.11 => 5.3.11 typescript: ^4.0.0 => 4.9.5

Search keywords: micro-frontend Order ID: 93387

KenanYusuf commented 3 days ago

Hi @lchiesa-sw - are you able to provide a minimal code example that shows this issue?

I tried to reproduce the error in a Codesandbox https://codesandbox.io/p/sandbox/crazy-williamson-wvrrtc. I am rendering a DataGrid (v6) and DataGridPremium (v7) and it seems to work as expected.