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>
    );
}

[Deamoner]

I have this same issue. Any update?

[Deamoner]

Pretty sure this has to do with react strict mode in nextjs. In prod doesn't happen and seems to be temporary fixable with nextjs config change:
module.exports = {
// Only do this for testing - don't commit this change
reactStrictMode: false,
// ... other config
}

[arjuna-wenzel]

I'm also having the same issue, but for me it's both in an built app and in dev

[JoseRaulLH]

same issue here

[vincentwinkel]

Same issue here.

The issue occurs only for media files (no embedded players) and only if they are the 1st media to be played (eg. I play first youtube then mp3, no problem, then I reload the page and play directly mp3 -> audio duplicated).

[robertmalicke]

Yes, this is a major issue for me. I confirm that the there is a duplicate audio issue that exists in NextJs for external media files and ONLY if it is the 1st media to be played. If it is the 1st media to be played, and if it is played after initial load, with playing=true, then there is a duplicate audio stream.