Webpack无法解析MUI组件？需添加/index.js才能导入的问题排查

解决方案 #

原因 #

这是Webpack模块解析的配置缺失导致的：

• MUI 5的组件比如Box，在node_modules/@mui/material/Box目录下的入口文件是index.js，但你的Webpack配置没有设置自动解析目录下主文件的规则，所以Webpack不知道@mui/material/Box其实指向该目录下的index.js。
• 手动加/index.js相当于直接指定了具体文件路径，Webpack不需要再做目录解析，所以能正常运行。

修复方法 #

修改webpack.config.js中的resolve配置，添加mainFiles选项，告诉Webpack当解析目录时，默认查找index开头的文件：

resolve: {
  extensions: ['.js', '.jsx', '.json'],
  // 添加这一行，指定目录默认入口文件
  mainFiles: ['index']
},

修改后，Webpack会自动把@mui/material/Box解析为@mui/material/Box/index.js，你就不用手动加后缀了。

补充 #

旧项目里同事可能已经配置过mainFiles，所以你之前没遇到这个问题。这个选项是Webpack的基础解析规则，不止适用于MUI，所有需要通过目录路径导入的模块都会受益于这个配置。

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