找不到模块：错误：无法解析“@mui/material/Unstable_Grid2”

Question

我正在尝试将 Grid2 用于我的 React 应用程序。但我在下面收到此错误：

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

我使用的是 MUI v5，并且执行了安装页面中给出的命令。我现在能想到的唯一解决方案是使用样式组件创建自己的布局组件。

此外，我使用 Webpackv5 作为我的打包器。请在下面找到配置。

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',
            },
        },
    };
};

Answer 1

您的依赖项显示您正在使用 MUI v6:

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

因此，正如v6迁移指南中所述，您需要删除所有

Unstable_

前缀，如下所示：

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

还有这个：

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