Usage with Material UI v5/v6

This guide describes the changes needed to use the Data Grid with Material UI v5/v6.

Package layout changes

MUI X v8 packages have been updated to use the Node.js exports field, following Material v7 package layout changes.

MUI X v8 packages are compatible with Material UI v7 out of the box. We encourage upgrading to Material UI v7 to take advantage of better ESM support.

Material UI v6 and v5 can still be used but require some additional steps if you are importing the packages in a Node.js environment.

General recommendations

Make sure to pass require condition when importing MUI X packages in Node.js environment:

node --conditions=require index.mjs

Vite

Update Vite configuration to pass the require condition:

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  ssr: {
    resolve: {
      externalConditions: ['require'],
    },
  },
});

Next.js Pages router

With Next.js App router, you don't need to do anything.

With Next.js Pages router, update Next.js configuration to pass the require condition and transpile MUI X packages:

// next.config.js

export default {
  webpack: (config) => {
    config.resolve.conditionNames = ['require', '...']; // '...' is important here – it keeps the default webpack conditionNames
    return config;
  },
  transpilePackages: [
    '@mui/x-data-grid',
    '@mui/x-data-grid-pro',
    '@mui/x-data-grid-premium',
    '@mui/x-date-pickers',
    '@mui/x-date-pickers-pro',
    '@mui/x-charts',
    '@mui/x-charts-pro',
    '@mui/x-tree-view',
    '@mui/x-tree-view-pro',
  ],
};

Webpack

Update Webpack configuration to pass the require condition:

// webpack.config.js

export default {
  // ...
  resolve: {
    conditionNames: ['require', '...'], // '...' is important here – it keeps the default webpack conditionNames
  },
};