I am trying to add an external script tag to my remix app landing page (i.e., / route) . this script, when loaded creates a floating button and adds it to the document (using document.body.appendChild). This causes hydration issues.. how do i resolve? (Reference: https://legacy.reactjs.org/docs/error-decoder.html/?invariant=418)
#External scripts that add elements dynamically
gusty anchor
neat ingot
I am trying to add an external script tag to my remix app landing page (i.e., `/...
You want to call that javascript only in the client, not in the server. Make use of a .client file and import it that way, then make sure your window/document is defined before running the javascript. It's interesting to me that it works at all currently, unless you are already making sure it runs in the client only.
gusty anchor
Sorry, how would i make use of .client file for this? the script i am trying to embed is something like support chatbot script which is embedded into a page by directly using <script src="..." /> ..
i tried to use the ExternalScriptsFunction and ExternalScripts component from the remix-utils
that's probably why it's partially working 😅
neat ingot
Sorry, no need for a .client file then, but do try this.
{typeof window !== "undefined" && <script src="..."/>}
ah, if you're already using remix-utils maybe:
const hydrated = useHydrated();
return (
// other stuff
{hydrated && <script src="..."/>}
// other stuff
)
Not sure it'll exactly fix the issue, but it hopefully will, because at the point that react realizes it's hydrated you then import the script and at that point dom updates can be made without too much worry
It'll make the first load of that script slower, but scripts that immediately mutate the dom are understandably a possible issue point. React "needs" to make sure that the HTML the server generated is the exact same as the HTML your client generates that way no funny business happened in between
gusty anchor
still the same issue.
i saw something about Suspense boundary. i am wondering if that can help 🤔
and there is also ClientOnly in remix-utils..
neat ingot
Yea, client only under the hood uses that hydrated && i suggested
but it has some extra stuff that I've seen it sometimes be less reliable than just the hydrated &&
or at least someone else I helped had an issue using ClientOnly and hydrated && worked for them
neat ingot
that is tricky, I haven't had to deal with too many external scripts like that. I'm not sure if that external script is just not viable with react SSR or perhaps someone more knowledgable in that side of things may have the answer. I know SSR has a lot of issues with browser extensions even adding tags into a user's html before react is fully satisfied
This would be a really hacky and non-ideal solution. But perhaps you can do something like:
const [showScript, setShowScript] = useState(false);
useEffect(() => {
// 500ms before adding the script tag to hopefully miss react complaining?
setTimeout(() => {
setShowScript(true)
}, 500);
},[]);
{showScript && <script src="..."/>}
I don't really recommend this, feels terrible lol... but I mean, maybe it'll avoid the hydration error
gusty anchor
considering my options (which is none), this is the best really.. and what's the worst that could happen? 😉
will try this out.. any external scripts that don't touch the dom (like google analytics) are fine.. it's just these support chat bubble widgets etc. that cause this issue. which makes sense because they are messing up what react is expecting.
light breach
It all else fails, you could try this, but as a last resort.
const ClientScript () => React.createElement("script", {
suppressHydrationWarning: true,
dangerouslySetInnerHTML: {
__html: `
const script = document.createElement('script');
script.setAttribute('async', '');
script setAttribute('src', url);
document.body.appendChild(script);
`,
},
});
Render <ClientScript/> at the bottom of your root