How do you clean up an embedded youtube subscribe button on a single page application

Question

I have embedded a youtube subscribe button on a single page application that I am building. It loads fine, but when I navigate to a different route, I get the following error message on that route's render:

cb=gapi.loaded_0:150 
Uncaught DOMException: Blocked a frame with origin "https://www.youtube.com" from accessing a cross-origin frame.
    at Object.nz [as kq] (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:150:257)
    at jz.send (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:148:261)
    at Fz (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:152:349)
    at https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:152:259

This happens even when I go to a route that doesn't have the subscribe button (as long as I was at a route with the button before). My main concern is not the cause of the error, but rather that the subscribe button that is no longer on the page is causing it. Worse still, as I navigate throughout the app, after every route I visit that has the subscribe button, an additional listener (or whatever is causing this) seems to be registered. The message is then printed out multiple times on each route render, once for each button that had been mounted since the last refresh. For reference, I am attaching my component:

import React, { useEffect, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import useScript from 'react-script-hook';
import './YoutubeSubscriberButton.scss';

interface Props {
    youtubeChannel: string
}

type gapiType = typeof gapi;
interface gapiYt extends gapiType {
    ytsubscribe: {
        render: (container: HTMLElement, parameters: {'channel': string, 'layout': string}) => any
    }
}

const YoutubeSubscriberButton: React.FC<Props> = observer(({ youtubeChannel }: Props): JSX.Element|null => {
    const [gapiLoading, gapiError] = useScript({ src: 'https://apis.google.com/js/platform.js'});
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const container = containerRef.current;
        if (!youtubeChannel || !container) {
            return;
        }

        while (container.firstChild) {
            container.removeChild(container.firstChild);
        }

        if (gapiLoading || gapiError) {
            return;
        }

        (gapi as gapiYt).ytsubscribe.render(container, {
            'channel': youtubeChannel,
            'layout': 'full'
        });

        return (() =>{
            while (container && container.firstChild) {
                container.removeChild(container.firstChild);
            }
        });
    }, [youtubeChannel, gapiLoading, gapiError]);

    return (
        <div className="youtube-subscriber-button-component">
            <div className="youtube-subscriber-button-container" ref={containerRef}/>
        </div>
    );
});

export default YoutubeSubscriberButton;

Is there a good way for me to clean up the gapi object, youtube subscribe button iframe, or whatever is causing this?

Answer 1

I made this CodeSandbox based on this solution from Alex McMillan that achieves a Youtube subscribe button. I checked it using React-routes and I had no issues.

You can replace the data-channelid within the App function to see it working.

You can find your unique Youtube Channel ID here:

class="g-ytsubscribe"
data-channelid="<YOUR CHANNEL ID HERE>"
data-layout="full"
data-theme="dark"
data-count="hidden"