使用@mui/material Unstable_Grid2时遇createGrid导出未找到错误求助

错误信息 #

ERROR in ./node_modules/@mui/material/Unstable_Grid2/Grid2.js 4:14-25 export 'createGrid' (imported as 'createGrid2') was not found in '@mui/system/Unstable_Grid' (module has no exports)

确认的现状 #

• createGrid文件存在默认导出：

export default function createGrid(options?: {
    createStyledComponent?: typeof defaultCreateStyledComponent;
    useThemeProps?: typeof useThemePropsDefault;
    componentName?: string;
}): OverridableComponent<GridTypeMap<{}, "div">>;
export {};

• @mui/system/Unstable_Grid入口文件已声明导出：

export { default } from './Grid';
export * from './GridProps';
export { default as createGrid } from './createGrid';
export { default as gridClasses } from './gridClasses';

export * from './gridClasses';

解决方法 #

• 清除依赖缓存并重装
  缓存异常是这类问题的常见诱因，执行以下命令：

  rm -rf node_modules package-lock.json yarn.lock
  npm install # 用yarn的话换成 yarn install
  

• 统一MUI包版本
  @mui/material和@mui/system版本不匹配会导致模块导出差异，检查package.json确保两者版本一致，不一致的话统一升级：

  npm install @mui/material@latest @mui/system@latest
  

• 排查构建工具配置
  如果用Webpack或Vite，确认配置里没有对@mui/system做特殊路径映射或导出限制，避免解析时跳过了正确的导出声明。

• 强制刷新构建缓存

  • Webpack：添加--cache=false参数重新编译
  • Vite：执行vite --force清除缓存后启动服务

• 临时应急修改（不推荐长期用）
  若以上方法都无效，可临时修改@mui/material/Unstable_Grid2/Grid2.js的导入路径：

  // 原代码
  import { createGrid as createGrid2 } from '@mui/system/Unstable_Grid';
  // 修改为
  import createGrid2 from '@mui/system/Unstable_Grid/createGrid';
  

  注意：修改node_modules文件会被后续依赖更新覆盖，仅作为临时解决手段。

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