How to use code that run outside of React?

[jcubic]

I have an issue with running jQuery plugin on div created in docusaurs page.

Here is a repro:

https://codesandbox.io/p/devbox/awesome-moon-wlhv6r?file=%2Fsrc%2Fpages%2Findex.js%3A29%2C14

It works fine inside Codesanbox emebeded browser, but if you open the app in separated tab and click tutorial and get back to the home page. The terminal is not visible. If you set the height of the container, it's occupy the space, but the content inside is not visible.

The JavaScript code get executed the DOM got updated only content is not visible. Some of the elements inside jQuery plugins have fraction height.

I've tried multiple things to trigger the reflow on the page, nothing is working.

I've asked on StackOverflow: https://stackoverflow.com/q/78142628/387194

Any hints on how to find where is the problem would be great.

EDIT: I can try to create smaller reproduction, but the problem is with this library that works fine outside of Docusaurs. It works fine even in pure React. But Docusaurs is doing something funky with the HTML that is not part of React, that's why maybe you know what may be the problem.

[jcubic]

It seems that this is a bug in Docusaurs that hijack the navigation and needs to be doing some caching of the DOM to restore the view, and it breaks code that is outside of React.

I solve the issue by running swizzle on the Logo and replace <Link> with <a> tag.

If you know a better way, let me know. The navigation is a bit slower because the whole JavaScript needs to be downloaded and run again. But now it actually works.

[slorber]

Client side navigation is not a bug, it's how Docusaurus works for all navigations.

It's impossible to help you in a reasonable time frame because we need a smaller repro clearly explained for that. I'm sorry but I can't spend hours trying to reverse engineering your code and figure out what you try to do with these loaded scripts.

[jcubic]

I try to run the code once like you have a script tag in HTML. But the head doesn't execute scripts in order and useEffect load the same scripts multiple times even if they are already loaded by the page. It's just impossible to use it with 3rd party library that is not React code.

[jcubic]

I think that I've found the root cause of this. The problem is that CSS is not loaded before the JavaScript code. Or something else, the code works fine. So the problem is totally on my part. I will close the discussion to not confuse people.

[Josh-Cena]

BTW, have you tried https://docusaurus.io/docs/advanced/client#client-module-lifecycles? Client modules are exactly designed to be escape hatches from React that allows you to inject imperative code!

[jcubic]

Thanks, will check it out, but for now I think that I don't need this. I only need to remove the swizzled code and see how it will work without it.