The Community is undergoing a major upgrade. Find out more, ask us questions or share your thoughts here.
Forum Discussion
RyanW
5 years agoNew member | Level 2
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.
- Greg-DBDropbox Staff
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-DBDropbox Staff
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
- adminHbitsNew 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- Greg-DBDropbox Staff
adminHbits You can find the instructions, including information on how to remove an Embedder, in the Embedder documentation here.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
5,875 PostsLatest Activity: 52 minutes agoIf 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!