diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index cdfd95277d1f5..ed0c645f125e0 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -108,6 +108,47 @@ The `legacy` bundle that used to support old browsers like IE 11 is no longer i If you need support for IE 11, you will need to keep using the latest version of the `v6` release. ::: +### Drop webpack 4 support + +Dropping old browsers support also means that we no longer transpile some features that are natively supported by modern browsers – like [Nullish Coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining). + +These features are not supported by webpack 4, so if you are using webpack 4, you will need to transpile these features yourself or upgrade to webpack 5. + +Here is an example of how you can transpile these features for webpack 4 using `@babel/preset-env` plugin: + +```diff + // webpack.config.js + + module.exports = (env) => ({ + // ... + module: { + rules: [ + { + test: /\.[jt]sx?$/, +- exclude: /node_modules/, ++ exclude: [ ++ { ++ test: path.resolve(__dirname, 'node_modules'), ++ exclude: [ ++ path.resolve(__dirname, 'node_modules/@mui/x-data-grid'), ++ path.resolve(__dirname, 'node_modules/@mui/x-license'), ++ ], ++ }, ++ ], + use: [ + { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env', '@babel/preset-react'], + }, + }, + ], + }, + ], + }, + }); +``` + ### DOM changes The Data Grid's layout has been substantially altered to use CSS sticky positioned elements.