[data grid] Error with useId when using @mui/x-data-grid-premium versions after 8.11.3 (React 17) #20631
Description
The problem in depth
The problem in depth
Description
I am experiencing a compilation error when installing any version of @mui/x-data-grid-premium after 8.11.3. In all newer versions, like 8.20.0 and 8.20.1, the Charts Panel code attempts to import useId from React, which is only available in React 18. My project uses React 17, and the error occurs even in a fresh CRA setup.
Version 8.11.3 works correctly in the same environment, which suggests that later releases may have introduced an unintended dependency on React 18.
I also want to note that I could not reproduce this issue on CodeSandbox. However, the error occurs consistently in both my main application and in a fresh local CRA project using React 17.
Environment
- React 17
- CRA
- react-app-rewired
- @mui/x-data-grid-premium > 8.11.3
Error
Attempted import error: 'useId' is not exported from 'react' (imported as 'React').
ERROR in ./node_modules/@mui/x-data-grid-premium/esm/components/chartsPanel/data/GridChartsPanelDataField.js 133:35-46
export 'useId' (imported as 'React') was not found in 'react'
ERROR in ./node_modules/@mui/x-data-grid-premium/esm/components/chartsPanel/data/GridChartsPanelDataField.js 134:28-39
export 'useId' (imported as 'React') was not found in 'react'What I am asking
- Has React 17 support been intentionally dropped for versions after 8.11.3?
- If not, could this be a regression related to the Charts Panel implementation?
- Any guidance on whether React 18 is now required for the latest MUI X releases would be appreciated.
Application Main Files
package.json
{
"name": "react",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.tsx",
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/lab": "5.0.0-alpha.92",
"@mui/material": "^5.15.14",
"@mui/styles": "^5.15.14",
"@mui/x-data-grid-premium": "8.21.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"loader-utils": "3.2.1",
"react-app-rewired": "^2.2.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}config-overrides.js
/* eslint-disable no-param-reassign */
/* eslint-disable prettier/prettier */
// config-overrides.js
module.exports = function override(config) {
config.module.rules.push({
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
});
return config;
};App.js
```js import { DataGridPremium } from "@mui/x-data-grid-premium";const rows = [
{
id: 1,
product: "Apples",
region: "North",
quarter: "Q1",
sales: 1000,
profit: 100,
size: "L",
},
{
id: 2,
product: "Apples",
region: "South",
quarter: "Q1",
sales: 1200,
profit: 120,
size: "M",
},
{
id: 3,
product: "Oranges",
region: "North",
quarter: "Q1",
sales: 800,
profit: 80,
size: "M",
},
{
id: 4,
product: "Oranges",
region: "South",
quarter: "Q1",
sales: 900,
profit: 90,
size: "S",
},
{
id: 5,
product: "Apples",
region: "North",
quarter: "Q2",
sales: 1100,
profit: 110,
size: "L",
},
{
id: 6,
product: "Apples",
region: "South",
quarter: "Q2",
sales: 1300,
profit: 130,
size: "L",
},
{
id: 7,
product: "Oranges",
region: "North",
quarter: "Q2",
sales: 850,
profit: 85,
size: "M",
},
{
id: 8,
product: "Oranges",
region: "South",
quarter: "Q2",
sales: 950,
profit: 95,
size: "S",
},
];
const columns = [
{ field: "product", headerName: "Product" },
{ field: "region", headerName: "Region" },
{ field: "quarter", headerName: "Quarter" },
{
field: "sales",
headerName: "Sales",
type: "number",
valueFormatter: (value) => {
if (!value) {
return "";
}
return currencyFormatter.format(value);
},
},
{
field: "profit",
headerName: "Profit",
type: "number",
valueFormatter: (value) => {
if (!value) {
return "";
}
return ${value}%;
},
},
{
field: "size",
headerName: "Size",
},
];
const pivotModel = {
rows: [{ field: "product" }, { field: "size" }],
columns: [{ field: "region" }, { field: "quarter" }],
values: [
{ field: "sales", aggFunc: "sum" },
{ field: "profit", aggFunc: "avg" },
],
};
const initialState = {
pivoting: {
enabled: true,
model: pivotModel,
},
sidebar: {
open: true,
},
};
export default function GridPivotingQuickStart() {
return (
<div style={{ height: 560, width: "100%" }}>
<DataGridPremium
rows={rows}
columns={columns}
initialState={initialState}
columnGroupHeaderHeight={36}
showToolbar
slotProps={{
toolbar: {
showQuickFilter: false,
},
}}
/>
);
}
const currencyFormatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 0,
maximumFractionDigits: 0,
});
</details>
### Your environment
<details>
<summary>`npx @mui/envinfo`</summary>
System:
OS: Linux 6.5 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
Binaries:
Node: 20.17.0 - /home/[email protected]/.nvm/versions/node/v20.17.0/bin/node
npm: 10.8.2 - /home/[email protected]/.nvm/versions/node/v20.17.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 142.0.7444.59
Firefox: 146.0
npmPackages:
@emotion/react: ^11.9.3 => 11.14.0
@emotion/styled: ^11.9.3 => 11.14.1
@mui/base: 5.0.0-alpha.91
@mui/core-downloads-tracker: 5.18.0
@mui/lab: 5.0.0-alpha.92 => 5.0.0-alpha.92
@mui/material: ^5.15.14 => 5.18.0
@mui/private-theming: 5.17.1
@mui/styled-engine: 5.18.0
@mui/styles: ^5.15.14 => 5.18.0
@mui/system: 5.18.0
@mui/types: 7.2.24
@mui/utils: 5.17.1
@mui/x-data-grid: 8.21.0
@mui/x-data-grid-premium: 8.21.0 => 8.21.0
@mui/x-data-grid-pro: 8.21.0
@mui/x-internal-exceljs-fork: 4.4.3
@mui/x-internals: 8.21.0
@mui/x-license: 8.21.0
@mui/x-telemetry: 8.19.0
@mui/x-virtualizer: 0.2.11
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
</details>
**Search keywords**: datagrid, react, cra, charts, premium
**Order ID**: 121279
### Your environment
<details>
<summary>`npx @mui/envinfo`</summary>
System:
OS: Linux 6.5 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
Binaries:
Node: 20.17.0 - /home/[email protected]/.nvm/versions/node/v20.17.0/bin/node
npm: 10.8.2 - /home/[email protected]/.nvm/versions/node/v20.17.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 142.0.7444.59
Firefox: 146.0
npmPackages:
@emotion/react: ^11.9.3 => 11.14.0
@emotion/styled: ^11.9.3 => 11.14.1
@mui/base: 5.0.0-alpha.91
@mui/core-downloads-tracker: 5.18.0
@mui/lab: 5.0.0-alpha.92 => 5.0.0-alpha.92
@mui/material: ^5.15.14 => 5.18.0
@mui/private-theming: 5.17.1
@mui/styled-engine: 5.18.0
@mui/styles: ^5.15.14 => 5.18.0
@mui/system: 5.18.0
@mui/types: 7.2.24
@mui/utils: 5.17.1
@mui/x-data-grid: 8.21.0
@mui/x-data-grid-premium: 8.21.0 => 8.21.0
@mui/x-data-grid-pro: 8.21.0
@mui/x-internal-exceljs-fork: 4.4.3
@mui/x-internals: 8.21.0
@mui/x-license: 8.21.0
@mui/x-telemetry: 8.19.0
@mui/x-virtualizer: 0.2.11
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
</details>
**Search keywords**: datagrid, mui, cra, react
**Order ID**: 121279