Skip to content

[data grid] v8 Migration Error: MUI X: Could not find the Data Grid context. #17503

@The-Adult-In-The-Room

Description

@The-Adult-In-The-Room

Steps to reproduce

I put together a reproduction. It's recreated very easily with a barebones React project strapped with Parcel.
Important note: It doesn't have issues rendering the install for free version of x-data-grid, only the x-data-grid-pro.

Steps:
Sample Repo with steps in readme

Current behavior

When a DataGrid component would be rendered, app crashes with:

useGridApiContext.js:13
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.

Image

Expected behavior

DataGrid component should render without causing a crash.

Context

While upgrading from v7 Datagrid to v8, this issue presents. I had already upgraded dependency @mui/material to v7 separately without issue.

Bundler: Parcel
Project type: Initially cjs, converted to module and issue is still present

Your environment

npx @mui/envinfo
 System:
    OS: macOS 15.3.2
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 135.0.7049.96
    Edge: Not Found
    Safari: 18.3.1
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.0.2 
    @mui/material: ^7.0.2 => 7.0.2 
    @mui/private-theming:  7.0.2 
    @mui/styled-engine:  7.0.2 
    @mui/system:  7.0.2 
    @mui/types:  7.4.1 
    @mui/utils:  7.0.2 
    @mui/x-data-grid:  8.0.0 
    @mui/x-data-grid-pro: ^8.0.0-beta.3 => 8.0.0 
    @mui/x-internals:  8.0.0 
    @mui/x-license: ^8.0.0 => 8.0.0 
    @mui/x-telemetry:  8.0.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.1.17 
    typescript: ^5.8.3 => 5.8.3

Search keywords: Could not find the Data Grid context, It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: data gridChanges related to the data grid.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions