Setting playIcon prop causes Runtime Error

[marco-cruz-dev]

Version 3.x and above is causing the following when setting playIcon prop:

Runtime Error
RangeError: Maximum call stack size exceeded

Temporary fix: Downgrading to 2.16.0 fixed it for now.

[luwes]

could you provide a codesandbox or similar? I tried to repro but I couldn't with these props

            light={true}
            playIcon={<div>Play</div>}

[marco-cruz-dev]

Tested with an out of the box codesandbox setup and it worked, but as soon as I added 'use client' to the page it was included, the runtime error showed up.

https://codesandbox.io/p/live/6baef238-341c-495f-abe2-ca55f5a760f9

[VarPDev]

@luwes I have the same problem

<ReactPlayer
            className={`react-player ${className}`}
            src={src}
            playIcon={<IdmBigPlayButton onPlayCLick={handlePlay} />}
          />

import { IdmIcon } from '../icon/icon'

export interface IdmBigPlayButtonProps {
  onPlayCLick: () => void
}

export const IdmBigPlayButton = ({ onPlayCLick }: IdmBigPlayButtonProps) => {
  const togglePlay = () => {
    onPlayCLick()
  }

  return (
    <div
      className={`idm-play-container-button`}
      onClick={togglePlay}
      aria-label='Play video'
    >
      <div className='big-play-container'>
        <IdmIcon icon='play_arrow' />
      </div>
    </div>
  )
}

export default IdmBigPlayButton

This is the error in console

index.mjs:2 RangeError: Maximum call stack size exceeded
at isSpecial (cjs.js:12:1)
at Object.isMergeableObject (cjs.js:5:1)
at mergeObject (cjs.js:81:1)
at deepmerge (cjs.js:117:1)
at cloneUnlessOtherwiseSpecified (cjs.js:34:1)
at cjs.js:94:1
at Array.forEach ()
at mergeObject (cjs.js:86:1)
at deepmerge (cjs.js:117:1)
at cloneUnlessOtherwiseSpecified (cjs.js:34:1)

If I remove playIcon prop everything works fine

I tried also with this:

playIcon={<div>ciao</div>}

same error

[luwes]

@marco-cruz-dev can you make the codesandbox public?

[luwes]

fixed https://codesandbox.io/p/devbox/6zg6sf?file=%2Fapp%2Fplayer.tsx