Uncaught error using Embedder in React Portal

[RyanW]

I'm attempting to use the Embedder in a React web app. The link to the embedded folder is generated dynamically so I'm using the Dropbox.embed function. I'm doing so in a React Portal using the following code:

import { useEffect } from 'react';
import { createPortal } from 'react-dom';

export default function DropboxPortal({ link, children }) {
    const mount = document.getElementById('dropbox-root');
    const el = document.createElement('div');

    useEffect(() => {
        mount.appendChild(el);
        global.Dropbox.embed({ link }, el);

        return () => {
            mount.removeChild(el);
        }
    }, [el, link, mount]);

    return createPortal(children, el);
};

The component unmounts the created div element from above and it's children are all removed from the DOM however I'm getting this error in the console Uncaught Error: iframe does not contain a contentWindow while navigating around the app after unmounting. I was wondering if there is an event listener or something that needs to be cleaned up in this scenario and how I might do so? When logging the event listeners on the window object in chrome dev tools I see that a message event listener is added by dropins.js:1.

[Greg-DB]

Thanks for the report! We'll look into it. We may need to add some sort of cleanup method for this kind of use case. I'll follow up here once I have an update for you.

[Greg-DB]

We've added functionality for removing the Embedder. You can find information on this under the "Removing the Embedder" section in the documentation: https://www.dropbox.com/developers/embedder 

[adminHbits]

Hi,

We are getting a similar error in React. Is it possible to have a source code for react to use react embed

[Greg-DB]

@adminHbits You can find the instructions, including information on how to remove an Embedder, in the Embedder documentation here.