NextJS 14（App Router）集成MUI ThemeProvider运行报错问题

错误信息 #

TypeError: Cannot read properties of undefined (reading 'duration')
Call Stack: 
duration
node_modules\@mui\material\Fade\Fade.js (30:30)
etc...

相关代码 #

src/app/layout.tsx #

import React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import MainHeader from "./NavBar";
import FeedbackProvider from "@/components/providers/FeedbackProvider";
import UserProvider from "@/components/providers/UserProvider";
import { lightTheme } from "@/lib/themeOptions";
import { ThemeProvider } from "@emotion/react";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";

export default function RootLayout({ children }: { children: React.ReactNode }): JSX.Element {
  return (
    <React.Fragment>
      <CssBaseline />
      <html lang="en">
        <head>
          <meta name="viewport" content="initial-scale=1, width=device-width" />
        </head>
        <body>
          <AppRouterCacheProvider>
            <ThemeProvider theme={lightTheme}>
              <FeedbackProvider>
                <UserProvider>
                  <MainHeader />
                  {children}
                </UserProvider>
              </FeedbackProvider>
            </ThemeProvider>
          </AppRouterCacheProvider>
        </body>
      </html>
    </React.Fragment>
  );
}

package.json依赖 #

"dependencies": {
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@fontsource/roboto": "^5.0.8",
    "@hookform/resolvers": "^3.3.2",
    "@mui/icons-material": "^5.14.15",
    "@mui/material": "^5.15.16",
    "@mui/material-nextjs": "^5.15.11",
    "@mui/system": "^5.15.15",
    "@mui/x-date-pickers": "^6.17.0",
    "@prisma/client": "^5.11.0",
    "@supabase/ssr": "^0.1.0",
    "@supabase/supabase-js": "^2.39.8",
    "dayjs": "^1.11.10",
    "fund": "^1.0.0",
    "next": "^14.0.1",
    "prop-types": "^15.8.1",
    "react": "^18",
    "react-dom": "^18",
    "server-only": "^0.0.1",
    "zod": "^3.22.4"
  },
}

已尝试的解决方案 #

• 遵循Material UI官方NextJS App Router集成规范
• 将NextJS从14.0.1升级到14.2.3，逐个更新/重装Material UI相关依赖包
• 直接在layout.tsx中使用ThemeProvider，以及将ThemeProvider封装为客户端组件后导入使用
• 仅用ThemeProvider包裹单个客户端页面，仍出现类似错误但涉及不同MUI组件
• 分别尝试@mui/material-nextjs/v13-appRouter和@mui/material-nextjs/v14-appRouter两种导入路径

最终解决方法 #

执行npm update后因缺失@emotion/styled包报错，重新添加该包后，最终排查发现问题出在主题创建的语法错误，修复该语法错误后问题解决。

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