I’m looking to embed this js viewer, designed to display archived websites in the WACZ format, in Retool: Embedding ReplayWeb.page - ReplayWeb.page Docs
I’m open to any approach, but I’m thinking that a custom component, using the new beta, is the way to go.
Outside of Retool it’s easy to get this working using the instructions in the linked documentation. However, I’ve been struggling to get it to work in a react component in Retool.
I’m able to create the component and have it appear in Retool, then add StateStrings for the path to the file and the URL variables, and then I see that those show up correctly in the HTML in Retool when I inspect the component using Chrome devtools. So far, so good.
The problem is that I can’t get the web component to render.
You’ll see in the documentation that there are two js files that need to be linked for to work. There’s ui.js, and sw.js.
ui.js is tpically loaded via a script tag:
I’m learning react as a I go, but thus far I’ve tried:
a) Loading it into my react component as follows
useEffect(() => {
// Load the web component's JavaScript files
const scriptUI = document.createElement('script');
scriptUI.src = 'https://cdn.jsdelivr.net/npm/replaywebpage@2.0.0/ui.js';
scriptUI.async = true;
document.body.appendChild(scriptUI);
return () => {
// Cleanup function to remove the scripts when the component unmounts
document.body.removeChild(scriptUI);
}; }, []);
b) Loading it in Retool, via the Libraries tab
In both cases I see that it has indeed loaded, via the Chrome dev console. However, the does not render anything.
Even if the second js file, sw.js, is not loaded, I would expect the component to render the error: “ReplayWeb.page could not be loaded due to the following error: TypeError: Script [URL Goes Here] load failed”. That is the typical behaviour outside of Retool. However, nothing at all appears on screen.
Any tips or ideas would be greatly appreciated!
EDIT:
I tried with a plain HTML component, again with the ui.js library loaded in Retool via the Libraries tab. I get the same result there too.
Interestingly, when I take that approach, if I enter this HTML into the component:
<div class="test"><replay-web-page source="URLGoesHere" url="URLGoesHere"></replay-web-page></div>
The output I get when I inspect the rendered HTML via Chrome dev tools is this:
<div class="test"></div>
I'm not sure why the tag is being stripped out in that case.
