Module not found: Error: Can't resolve '@mui/material/Unstable_Grid2'

I am trying to use Grid2 for my React Application . But I am getting this error below:

Module not found: Error: Can't resolve '@mui/material/Unstable_Grid2'

I am using MUI v5, and I went through the commands given in the Installation page. Only solution I can think of now create my own layout components using styled-components.

Additionally ,I am using Webpackv5 as my bundler. Please find below the configuration.

Pacakge.json

{
    "name": "simp_login_page",
    "version": "1.0.0",
    "main": "index.jsx",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack serve --open --mode=development --env=development",
        "build": "webpack --mode=production --env=production"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": "",
    "devDependencies": {
        "@babel/core": "^7.25.2",
        "@babel/preset-env": "^7.25.4",
        "@babel/preset-react": "^7.24.7",
        "babel-loader": "^9.1.3",
        "eslint": "^9.10.0",
        "eslint-plugin-jsx-a11y": "^6.10.0",
        "eslint-plugin-react": "^7.36.1",
        "eslint-webpack-plugin": "^4.2.0",
        "html-webpack-plugin": "^5.6.0",
        "webpack": "^5.94.0",
        "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^5.1.0"
    },
    "dependencies": {
        "@emotion/react": "^11.13.3",
        "@emotion/styled": "^11.13.0",
        "@mui/icons-material": "^6.1.0",
        "@mui/material": "^6.1.0",
        "@mui/styled-engine-sc": "^6.1.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "styled-components": "^6.1.13"
    }
}

webpack.config.js

const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env) => {
    const isProduction = !env.development ? 'yes' : 'no';
    return {
        entry: './src/index.jsx',
        output: {
            filename: 'main.js',
            path: path.resolve(__dirname, 'dist'),
            clean: true,
        },
        devtool: isProduction === 'yes' ? 'source-map' : 'inline-source-map',
        devServer: {
            static: './dist',
            hot: true,
        },
        module: {
            rules: [
                {
                    test: /\.(?:js|mjs|cjs|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                ['@babel/preset-env', { targets: 'defaults' }],
                            ],
                        },
                    },
                },
            ],
        },
        plugins: [
            new ESLintPlugin({
                // Options for ESLint plugin
                extensions: ['js', 'jsx'], // Specify file extensions to lint
                exclude: ['node_modules'], // Exclude folders from linting
                fix: true, // Enable auto-fixing of some lint errors
            }),
            new HtmlWebpackPlugin({
                title: 'Output Management',
                template: './src/index.html',
            }),
        ],
        resolve: {
            alias: {
                '@mui/styled-engine': '@mui/styled-engine-sc',
            },
        },
    };
};

Your dependencies show that you are using MUI v6:

"@mui/icons-material": "^6.1.0",
"@mui/material": "^6.1.0",
"@mui/styled-engine-sc": "^6.1.0",

Therefore, as it is stated in v6 migration guide, you need to remove all Unstable_ prefixes like this:

-import { Unstable_Grid2 as Grid2 } from '@mui/material';
+import { Grid2 } from '@mui/material';

and this:

-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';