导入Material-UI IconButton时出现TypeError错误求助

我之前碰到过一模一样的坑！这个报错通常是Material-UI依赖版本不兼容、缓存残留或者配置冲突导致的，给你几个亲测有效的解决办法：

• 统一Material-UI相关包的版本
  这是最常见的诱因：如果@material-ui/core和@material-ui/icons（或其他Material-UI子包）版本不一致，内部组件的继承逻辑就会出现断裂。

  1. 打开你的package.json，检查所有@material-ui/开头的包版本是否完全一致
  2. 卸载现有包后重新安装同版本：

     # npm 用户
     npm uninstall @material-ui/core @material-ui/icons
     npm install @material-ui/core@latest @material-ui/icons@latest
     
     # yarn 用户
     yarn remove @material-ui/core @material-ui/icons
     yarn add @material-ui/core@latest @material-ui/icons@latest
     

• 清除缓存并重新构建
  Webpack或npm的缓存可能残留了旧的依赖文件，导致组件加载冲突：

  • 如果用Create React App，直接重启开发服务器并重置缓存：

    npm start -- --reset-cache
    

  • 彻底清理依赖缓存：

    rm -rf node_modules package-lock.json yarn.lock
    npm install
    

• 检查是否混用了Material-UI v4和v5
  Material-UI v5把包名从@material-ui/core改成了@mui/material，如果项目里同时存在v4和v5的包，必然会出现这种继承错误。确保所有组件导入都来自同一个版本的包：

  • v4导入：import IconButton from '@material-ui/core/IconButton';
  • v5导入：import IconButton from '@mui/material/IconButton';
    绝对不要同时使用两种导入方式。

• 检查自定义Babel配置（如果有）
  如果你手动配置了Babel，要确保它能正确转译ES6类语法。Material-UI的组件依赖正确的类继承转译，你的Babel配置应该包含：

  {
    "presets": ["@babel/preset-react", "@babel/preset-env"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
  }
  

我当时就是因为不小心装了不同版本的@material-ui/core和@material-ui/icons，重新安装同版本后问题直接解决了。如果上面的方法都没用，你可以试试创建一个全新的最小项目，只导入IconButton测试，排除项目其他代码的干扰。

内容的提问来源于stack exchange，提问作者Øyvind Bråthen