cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Tell us what you want to see on the Community here!
Close

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Uncaught error using Embedder in React Portal

Highlighted

Uncaught error using Embedder in React Portal

New member | Level 2

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.

2 Replies 2
Highlighted

Re: Uncaught error using Embedder in React Portal

Dropboxer

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.

Highlighted

Re: Uncaught error using Embedder in React Portal

Dropboxer

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 

Work Smarter with Dropbox

The way we work is changing. Share and discover new ways to work smarter with Dropbox in our community.

Sound good? Let's get started.
Who's talking

Top contributors to this post

What do Dropbox user levels mean?
Need more support?