Audio Duplication with ReactPlayer in Next.js using --turbo Flag

[l-Nuril-l]

Current Behavior

When using ReactPlayer in a Next.js project with the --turbo flag enabled, audio is duplicated starting from version 2.14 up to 2.16 of react-player. The issue does not occur in earlier versions (e.g., 2.13). This happens when toggling the ReactPlayer component based on state and occurs only the first time after the page loads.

Expected Behavior

Audio should play without duplication when ReactPlayer is triggered, and the sound should play as expected without overlapping.

Steps to Reproduce

1. Use Next.js with the --turbo flag ("dev": "next dev --turbo").
2. Include the ReactPlayer component that streams video from a local or remote source.
3. Toggle the player using a button to initiate playback.
4. Observe that, starting from react-player versions 2.14 - 2.16, the sound is duplicated.

Environment

• Browser: Chrome 129
• Operating system: Windows 11

Code Example

"use client"
import React, { useState } from 'react';
import ReactPlayer from 'react-player';

export default function page() {
    const [state, setState] = useState(false);
    return (
        <div>
            <button onClick={() => setState(true)}>click</button>
            {state && <ReactPlayer url='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' playing={true} />}
        </div>
    );
}