-
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. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
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 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. |
Beta Was this translation helpful? Give feedback.
-
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! |
Beta Was this translation helpful? Give feedback.
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.