NextJS 14集成MUI 5.15报TypeError: Cannot read '300'属性

错误信息 #

⨯ Internal error: TypeError: Cannot read properties of undefined (reading '300')
    at ButtonRoot.ownerState.ownerState (./node_modules/@mui/material/Button/Button.js:116:96)
    at muiStyledFunctionResolver (./node_modules/@mui/system/esm/createStyled.js:127:28)
    at transformedStyleArg (./node_modules/@mui/system/esm/createStyled.js:245:48)
    at handleInterpolation (./node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js:127:34)
    at serializeStyles (./node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js:230:19)
    at eval (./node_modules/@emotion/styled/base/dist/emotion-styled-base.worker.esm.js:120:97)
    at eval (./node_modules/@emotion/react/dist/emotion-element-2408c5fb.worker.esm.js:75:24)
    at renderWithHooks (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8245:26)
    at renderIndeterminateComponent (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8307:25)
    at renderElement (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8528:21)

相关代码 #

页面组件代码 #

"use client"
import Button from '@mui/material/Button';
import '@fontsource/roboto/300.css';
export default function Page() {
    return (
        <>
            <p>Hi!</p>
            <Button variant="contained">Do something fun.</Button>
        </>
    )
}

Root Layout配置 #

// layout.tsx
import type { Metadata } from 'next'
import Link from 'next/link'
import { Inter } from 'next/font/google'
import './globals.css'
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
export const runtime = 'edge'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
  title: 'St Albert Nordic Trail Report',
  description: 'St Albert Nordic Trail Grooming Report',
}
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
          <div className="container">
            {children}
            <hr />
            <ul>
              <li><Link href="/">Home</Link></li>
              <li><Link href="/admin/">Admin</Link></li>
            </ul>
          </div>
        </AppRouterCacheProvider>
      </body>
    </html>
  )
}

package.json依赖 #

{
  "name": "trail-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fontsource/roboto": "^5.0.8",
    "@mui/icons-material": "^5.15.2",
    "@mui/material": "^5.15.2",
    "@mui/material-nextjs": "^5.15.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@tanstack/react-table": "^8.11.2",
    "@tanstack/solid-table": "^8.10.7",
    "@tanstack/svelte-table": "^8.10.7",
    "@tanstack/table-core": "^8.10.7",
    "@tanstack/vue-table": "^8.10.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "immer": "^10.0.3",
    "leaflet": "^1.9.4",
    "lodash": "^4.17.21",
    "lucide-react": "^0.292.0",
    "next": "14.0.3",
    "next-intl": "^3.1.3",
    "react": "^17.0.0 || ^18.0.0",
    "react-datepicker": "^4.24.0",
    "react-datetime-picker": "^5.6.0",
    "react-dom": "^17.0.0 || ^18.0.0",
    "react-leaflet": "^4.2.1",
    "sass": "^1.69.5",
    "swr": "^2.2.4",
    "tailwind-merge": "^2.0.0",
    "tailwindcss-animate": "^1.0.7",
    "use-immer": "^0.9.0"
  },
  "devDependencies": {
    "@cloudflare/next-on-pages": "^1.8.0",
    "@cloudflare/workers-types": "^4.20231121.0",
    "@types/leaflet": "^1.9.8",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5",
    "wrangler": "^3.17.1"
  }
}

排查与解决方法 #

• 统一MUI包版本：@mui/material-nextjs版本（5.15.0）和@mui/material（5.15.2）不一致，升级@mui/material-nextjs到5.15.2，确保所有MUI核心依赖版本统一。
• 移除Edge Runtime测试：当前RootLayout设置了export const runtime = 'edge'，MUI的缓存提供器在Edge Runtime环境下存在兼容性问题，暂时注释该行，改用默认Node.js runtime验证。
• 调整字体优先级：页面同时引入Next.js的Inter字体和MUI的Roboto字体，可能引发样式冲突。可尝试移除Inter字体的引入，确保Roboto字体正常加载，或通过CSS调整字体优先级。
• 清理缓存重新构建：执行以下命令清理依赖缓存并重新安装：

rm -rf node_modules package-lock.json
npm install
npm run dev

• 确认客户端组件标记：确保所有使用MUI组件的页面都正确添加"use client"指令，避免服务器端渲染时的样式解析错误。

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