CRACO应用配置babel-plugin-import后无法解析@mui/material/ThemeProvider

原因分析 #

你遇到的Module not found: Can't resolve '@mui/material/ThemeProvider'错误，核心是CRACO配置中MUI的体积优化规则破坏了顶层模块的导入路径。

按照MUI官方指南配置按需加载或ES模块别名时，若仅针对@mui/material的子组件（如Button、TextField）做路径映射，而未正确处理ThemeProvider这类顶层导出的模块，就会导致Webpack无法找到对应的文件——因为ThemeProvider是直接从@mui/material的入口文件导出，而非子目录下的独立模块。

修复步骤 #

方案1：修正Webpack别名配置 #

在craco.config.js中，确保@mui/material的别名直接指向ES模块的入口目录，而非仅针对子组件：

module.exports = {
  webpack: {
    resolve: {
      alias: {
        '@mui/material': '@mui/material/esm',
        '@mui/styles': '@mui/styles/esm',
        '@mui/icons-material': '@mui/icons-material/esm',
      },
    },
  },
};

该配置会让所有从@mui/material的导入（包括顶层的ThemeProvider）都指向ES模块版本，同时保证子组件的按需加载生效。

方案2：正确配置babel-plugin-import #

若使用babel-plugin-import实现按需加载，需在CRACO的Babel配置中添加正确的插件规则，确保顶层导出模块被正确解析：

module.exports = {
  babel: {
    plugins: [
      [
        'babel-plugin-import',
        {
          libraryName: '@mui/material',
          libraryDirectory: 'esm',
          camel2DashComponentName: false,
        },
        'mui-material',
      ],
      [
        'babel-plugin-import',
        {
          libraryName: '@mui/icons-material',
          libraryDirectory: 'esm',
          camel2DashComponentName: false,
        },
        'mui-icons',
      ],
    ],
  },
};

此配置会自动将import { ThemeProvider, Button } from '@mui/material'这类导入，转换为对应的ES模块路径，既实现体积优化，又保证所有模块可被正确解析。

临时替代方案 #

若不想修改配置，也可将ThemeProvider的导入路径改为从@mui/material/styles导入：

import { ThemeProvider } from '@mui/material/styles';

该路径在常规的体积优化配置下通常能被正确解析。

内容的提问来源于stack exchange，提问作者MarksCode