升级至MUI5后导入TextField报Object(...) is not a function错误如何解决

第一步：清理依赖冲突 #

你同时安装了beta版的@material-ui/core、@material-ui/styles和正式版的@mui/material，MUI 5正式版已经把包名统一切换到@mui scope下，旧beta包和正式包共存会导致依赖冲突，这是最核心的原因。

• 执行卸载命令移除旧的beta依赖：

npm uninstall @material-ui/core @material-ui/styles
# 用yarn的话执行 yarn remove @material-ui/core @material-ui/styles

• 清空node_modules和lock文件避免缓存：

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

• 重新安装依赖：

npm install
# 或者yarn install

第二步：升级不兼容的工具版本 #

你当前用的babel-loader@7.1.1是适配babel 6的版本，和你安装的@babel/core 7.x不兼容，需要升级babel-loader到8.x版本：

npm install babel-loader@8 --save-dev
# 或者yarn add babel-loader@8 --dev

第三步：调整Babel配置 #

给@babel/preset-react添加运行时配置，确保JSX转换适配React 17的新JSX转换规则，修改babel配置如下：

"babel": {
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
},

第四步：可选-手动处理Emotion依赖冲突 #

如果执行完上面三步还有报错，是因为子依赖的stylis版本不兼容，手动锁定stylis版本到4.x即可：

• 如果你用npm，在package.json里添加：

"overrides": {
  "stylis": "^4.0.0"
}

• 如果你用yarn，在package.json里添加：

"resolutions": {
  "stylis": "^4.0.0"
}

修改完成后重新安装依赖即可。

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