mui / mui/material-ui

Divider resolves to undefined when passed via Stack's divider prop in a React Server Component

Open
#48,214 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: divider support: question type: expected behavior
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Steps to reproduce

Live example: https://github.com/iliarubashkin-movecars/mui-stack-divider-rsc-bug

Steps to reproduce:

  1. Create a server component (page.tsx, no "use client" directive)
  2. Use <Stack divider={}> with 2+ children
  3. The page crashes with:
Error: Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined
Current behavior

When <Divider> is passed via Stack's divider prop inside a React Server Component, it resolves to undefined during server rendering. With 1 child nothing breaks (no divider is inserted), but with 2+ children Stack injects the undefined component between them, causing a runtime crash.

Next.js automatically handles the "use client" boundary for MUI components when they are rendered as direct JSX children — but this mechanism does not work when a client component is passed as a prop value. This likely affects any MUI client component passed as a prop value in a server component, not just Divider.

The error message gives no indication that this is an RSC boundary issue, making it extremely difficult to debug.

Expected behavior

Stack with divider={<Divider />} should render dividers between children in a server component, the same way it works when <Divider> is used as a direct JSX child. Next.js should handle the "use client" boundary for components passed as prop values the same way it handles them as JSX children.

Context

Building a company profile page in Next.js App Router where the page component is an async server component (it fetches data via GraphQL). Using <Stack divider={<Divider />}> to visually separate sections of the profile. The page must remain a server component because it performs data fetching — adding "use client" to the entire page is not an option.

Your environment
npx @mui/envinfo
System:
  OS: Linux 6.8 Linux Mint 21.3 (Virginia)
Binaries:
  Node: 24.12.0 - /home/movecars/.asdf/installs/nodejs/24.12.0/bin/node
  npm: 11.6.2 - /home/movecars/.asdf/plugins/nodejs/shims/npm
  pnpm: 10.29.3 - /home/movecars/.asdf/shims/pnpm
Browsers:
  Chrome: 146.0.7680.177
  Firefox: 149.0

The issue is present in both Firefox and Chrome

Search keywords: Divider, Stack, divider prop, server component, RSC, undefined, Element type is invalid, use client, Next.js, App Router

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked live example and reproduce the crash using an App Router server component with Stack, Divider, and two or more children. Trace how the divider prop is handled across the React Server Component boundary; done means the example renders dividers without resolving the passed Divider element to undefined.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, javascript, next.js, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.