使用React Router与MUI Toolpad时遇ES模块目录导入不支持错误

错误信息 #

Directory import '...@mui\material\styles' is not supported resolving ES modules imported from ...@toolpad\core\AppProvider\AppProvider.js

当前导入代码 #

import BarChartIcon from "@mui/icons-material/BarChart";
import DashboardIcon from "@mui/icons-material/Dashboard";
import DescriptionIcon from "@mui/icons-material/Description";
import LayersIcon from "@mui/icons-material/Layers";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { createTheme } from "@mui/material/styles";
import { AppProvider, type Navigation } from "@toolpad/core/AppProvider";
import { DashboardLayout } from "@toolpad/core/DashboardLayout";
import { useDemoRouter } from "@toolpad/core/internal";

依赖配置 #

"dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@mui/material": "^6.4.0",
    "@mui/icons-material": "^6.4.0",
    "@react-router/node": "^7.1.3",
    "@react-router/serve": "^7.1.3",
    "@toolpad/core": "^0.12.0",
    "isbot": "^5.1.17",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.1.3"
  },

解决方案 #

1. 降级MUI到v5版本 #

Toolpad v0.12.0还没完全适配MUI v6，内部用的MUI模块导入方式在v6里不兼容，直接执行下面的命令降级：

npm install @mui/material@^5.15.20 @mui/icons-material@^5.15.20

2. 检查项目模块类型配置 #

如果你的项目package.json里设了"type": "module"，得确保所有依赖都支持ES模块规范。要是还报错，就在打包配置里加扩展名解析规则：

• Vite的话，在vite.config.js里加：

export default {
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.mjs'],
  },
};

• Webpack的话，在webpack.config.js里配置：

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },
};

3. 修改Toolpad内部导入（临时方案，不推荐） #

不想降级的话，可以改Toolpad内部的导入路径，但这样会影响后续版本更新，谨慎操作：找到@toolpad/core/AppProvider/AppProvider.js里的import '@mui/material/styles';，改成import '@mui/material/styles/index.js';

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