React/Next.js中@material-ui/core/styles导入触发ERR_UNSUPPORTED_DIR_IMPORT错误

问题根源 #

1. MUI版本路径不匹配：你使用的是MUI 5（依赖为@mui/material、@mui/styles），但导入语句用的是MUI 4的旧路径@material-ui/core/styles，两者包名与结构完全不同。
2. ES模块目录导入限制：Node.js 19的ES模块解析器不支持直接导入目录（必须指定具体文件），第三方库@myorg/mylib的内部导入逻辑也触发了这个限制。

具体解决步骤 #

1. 修正makeStyles的导入路径 #

将原导入语句替换为MUI 5的正确路径：

// 错误写法
import { makeStyles } from '@material-ui/core/styles'

// 正确写法
import { makeStyles } from '@mui/styles'

2. 处理第三方库的解析问题 #

如果错误来自@myorg/mylib内部的导入逻辑，在Next.js配置中添加转译该库的规则：
修改项目根目录的next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@myorg/mylib'],
}

module.exports = nextConfig

Next.js默认不会转译node_modules中的依赖，添加此配置后会强制转译指定库，解决ES模块解析异常。

3. 清理旧版MUI依赖（若存在） #

检查项目中是否安装了MUI 4的旧包@material-ui/core，如果有则卸载：

# 使用yarn
yarn remove @material-ui/core

# 使用npm
npm uninstall @material-ui/core

4. 清理缓存并重新构建 #

执行以下命令清理缓存、重装依赖，避免缓存残留导致的问题：

# 清理缓存
yarn cache clean
# 或 npm cache clean --force

# 删除依赖文件
rm -rf node_modules yarn.lock
# 或 rm -rf node_modules package-lock.json

# 重装依赖并启动项目
yarn install && yarn dev
# 或 npm install && npm run dev

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