React elements in step properties cause stack overflow due to deepmerge

[martinkwan]

🐛 Bug Report

The library uses deepmerge to merge step styles, but this causes infinite recursion when step properties contain certain React elements (especially emotion styled components).

For example, if I pass a styled component into step.content or step.title

The error in question

RangeError: Maximum call stack size exceeded
    at get [Symbol.species] (<anonymous>)
    at Array.filter (<anonymous>)
Caused by: React Component Stack Error: Maximum call stack size exceeded

I suspect it is because deepmerge tries to clone the step object including React elements.
The styled component from Emotion have circular references (for theme context and emotion cache)
which causes infinite recursion.

The solution I figured out for now, is to wrap the element with a React Fragment and have {null} as a sibling, which makes it an array instead.

According to deepmerge documentation: "By default, arrays are merged by concatenating them." Concatenating avoids the infinite recursion issue.

To Reproduce

This causes an RangeError:

{
  title: <StyledComponent space="small">...</StyledComponent>,
  content: <StyledComponent>...</StyledComponent>,
}

This does not cause an RangeError

{
  title: <div>...</div>,
  content: <div>...</div>,
}

Nor does this cause an error

{
  title: <><StyledComponent space="small">...</StyledComponent>{null}</>,
  content: <><StyledComponent>...</StyledComponent>{null}</>,
}

Expected behavior

A clear and concise description of what you expected to happen.

The Joyride component to render without errors.

Link to repl or repo (highly encouraged)

N/A

Run npx envinfo --system --binaries --npmPackages react-joyride

Paste the results here:

System Information
OS: macOS (Darwin Kernel 24.6.0, ARM64 architecture)
Node.js: v20.18.0
npm: 10.8.2
pnpm: 9.15.9

react-joyride Package
Version: 2.9.3
React Version: 19.2.0
React DOM Version: 19.2.0

[gilbarbara]

Please try npm i react-joyride@next