createTheme maximum call stack exceeded using next/link for LinkBehavior

[ChristopherChudzicki]

Steps to reproduce

Steps:

1. Use next/Link in createTheme, e.g.,

import { createTheme } from '@mui/material/styles';
import Link from 'next/link';

const theme = createTheme({
  components: {
    MuiLink: {
      defaultProps: {
        component: Link,
      },
    },
  },
});

2. Observe "Maximum call stack exceeded" error, as in https://stackblitz.com/edit/react-hp2ukf-b2maszea?file=index.tsx

Current behavior

Using Link from next/link in createTheme({...}) produces a maximum call stack exceeded error from deep merge.

Expected behavior

No error, Link component uses next/link as link behavior.

Note: Link from next/link is somewhat transpiled and does have circular references:

> Link = require('next/link')
<ref *1> {
  '$$typeof': Symbol(react.forward_ref),
  render: [Function: LinkComponent],
  default: [Circular *1]
}

Could deepmerge handle circular objects better in general? This is similar to #44278, but the fix there did not resolve this case.

Context

I was trying to use next/link in createTheme(...).

There is a straightforward workaround,

const theme = createTheme({
  components: {
    MuiLink: {
      defaultProps: {
        // Assuming React 19, no need for forwardRef
        component: props => <Link {...props />,
      },
    },
  },
});

but it would still be nice if this "just worked".

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.3.1
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.265
    Edge: Not Found
    Safari: 17.3.1
  npmPackages:
    @emotion/react:  11.13.3
    @emotion/styled:  11.13.0
    @mui/base:  5.0.0-beta.68
    @mui/core-downloads-tracker:  6.4.0
    @mui/lab:  6.0.0-beta.23
    @mui/material:  6.4.0
    @mui/private-theming:  6.4.0
    @mui/styled-engine:  6.4.0
    @mui/system:  6.4.0
    @mui/types:  7.2.21
    @mui/utils:  6.4.0
    @types/react:  18.3.11
    react:  19.0.0
    react-dom:  19.0.0
    typescript:  5.6.3

Search keywords: maximum createTheme call stack

[siriwatknp]

Thanks for reporting the issue. #44494 check for React element, but not React component. I will create a fix for this issue.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ChristopherChudzicki How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.