The Community is undergoing a major upgrade. Find out more, ask us questions or share your thoughts here.

Forum Discussion

RyanW's avatar
RyanW
New member | Level 2
5 years ago

Uncaught error using Embedder in React Portal

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.

About Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

5,875 PostsLatest Activity: 52 minutes ago
323 Following

If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.

For more info on available support options for your Dropbox plan, see this article.

If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!