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.
