升级MUI至5.15.13后出现Vite TypeError问题求助

问题描述 #

将MUI从5.14.20升级至5.15.13后，执行npm run dev时Vite在AstroJS环境下抛出TypeError，错误指向MUI内部的createPalette函数调用deepmerge时失败，错误栈如下：

TypeError: __vite_ssr_import_3__.default is not a function
    at Module.createPalette [as default] (/Users/user/code/loculus/website/node_modules/@mui/material/styles/createPalette.js:251:34)
    at Module.createTheme [as default] (/Users/user/code/loculus/website/node_modules/@mui/material/styles/createTheme.js:27:32)
    at /Users/user/code/loculus/website/node_modules/@mui/material/styles/defaultTheme.js:4:33
    at async instantiateModule (file:///Users/user/code/loculus/website/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:54897:9)

错误发生在MUI依赖代码中deepmerge调用的位置：

const paletteOutput = deepmerge(_extends({
    // A collection of common colors.
    common: _extends({}, common),
    // prevent mutable object.
    // The palette mode, can be light or dark.
    mode,
    ...

解决方案 #

针对该问题，可尝试以下步骤逐一排查解决：

• 锁定deepmerge版本
  MUI 5.15.x版本对deepmerge的依赖可能存在版本兼容性问题，手动安装指定版本的deepmerge并锁定：

  npm install deepmerge@4.3.1 --save
  

• 调整Vite SSR外部化配置
  在astro.config.mjs中，将MUI相关包及deepmerge加入SSR非外部化列表，确保Vite正确处理模块导入：

  import { defineConfig } from 'astro/config';
  
  export default defineConfig({
    vite: {
      ssr: {
        noExternal: ['@mui/material', '@mui/system', 'deepmerge']
      }
    }
  });
  

• 清除依赖缓存并重新安装
  可能存在依赖缓存冲突，删除旧依赖文件后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 优化Vite依赖预构建
  在Vite配置中强制预构建deepmerge，确保模块解析正确：

  import { defineConfig } from 'astro/config';
  
  export default defineConfig({
    vite: {
      optimizeDeps: {
        include: ['deepmerge']
      }
    }
  });
  

• 检查自定义主题代码
  确保项目中导入MUI主题相关函数的方式正确，使用命名导出而非错误的默认导入：

  // 正确写法
  import { createTheme, createPalette } from '@mui/material/styles';
  

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