Divider resolves to undefined when passed via Stack's divider prop in a React Server Component
Nobody has claimed this yet.
- 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:
- Create a server component (page.tsx, no "use client" directive)
- Use <Stack divider={}> with 2+ children
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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