cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Get summer ready with Dropbox basic - travel documents, plans, progress reminders and more, right over here.

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

Uncaught error using Embedder in React Portal

RyanW
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.

4 Replies 4

Re: Uncaught error using Embedder in React Portal

Greg-DB
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.

Re: Uncaught error using Embedder in React Portal

Greg-DB
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 

Re: Uncaught error using Embedder in React Portal

adminHbits
New member | Level 2

Hi,

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

 

Re: Uncaught error using Embedder in React Portal

Greg-DB
Dropboxer

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

Poll
Which Dropbox Plan do you have?
Who's talking

Top contributors to this post

  • User avatar
    Greg-DB Dropboxer
  • User avatar
    adminHbits New member | Level 2
What do Dropbox user levels mean?
Need more support?