-
-
Notifications
You must be signed in to change notification settings - Fork 8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Last picture overriden on reload #9036
Comments
Thank you for the great repro! Very easy to follow. I'll try to investigate. |
Unfortunately I can't reproduce this... I'm using localhost, Safari 16.5, macOS 13.4. Would be great if you can make a shareable repro. |
I'm so sorry to read that you can't reproduce. It's quite deterministic on my side and we've observed it on our website that was built by GitHub action running on Ubuntu. Just to confirm, if I open http://localhost:3000/blog then the first time, picture 3 html source code is:
If I hit reload now, picture 3 html source code becomes:
Also, if I prevent javascript from running (I tried by putting a breakpoint in the source of the page) then there is no problem. So it's really like the html is good but is immediately tempered with by javascript. It's important to note that I have to reload the page to see the problem. |
FYI, I asked some colleagues here to see if they can reproduce the bug and I haven't found anyone not having the issue yet. |
I am not able to reproduce either on your repro: Are you sure your repro is correct and you and your colleagues can reproduce deterministically the issue on your repro? Can you host your repro somewhere and then record us a video or screenshot showing the URL as a proof? Maybe this problem only happens in your real app? In this case please share the URL and/or record a video too. That is probably because of a React hydration issue. In some cases, the static HTML produced at build time is slightly different from the HTML rendered by React on the client, and the mismatch can create weird issues like this. It already happened in the past. Docusaurus itself has some little mismatches that are now reported in the console with React 18, and I'm in the process of fixing them as part of the React 18 upgrade here: #8961 It's possible that it's the fault of Docusaurus hydration mismatches, we already saw that happen in the past (#5617). Apart from waiting for the React 18 upgrade, you can try to add extra JSX tags (divs, spans, sections whatever) around your content, and this may help React avoid this issue. |
Edit: indeed I can see the problem on prod build on your repro (not with the dev server) and it looks like an hydration issue due to a mismatch somewhere else in the Docusaurus layout (should be fixed with React 18). In the meantime this is a workaround that seems to work: <div>
![Third picture](./img/3.jpg) <small><center>Do you see a 3?</center></small>
</div> |
Ah yes... I forgot I need to run a build to see hydration problems😅 Wondering why this would be though. My guess is that there's invalid markup "fixed" by Terser. |
That's a possibility, but the React 18 PR also reported a few issues that I fixed, so we'll see if we can still reproduce once we upgrade |
Just tested, Terser didn't change anything in the generated HTML. The JS chunk also looks okay-ish. This seems weird. |
I have a closely related issue on one of my projects. It can be seen on the following page: Clicking on the sidebar loads the last image correctly, reloading the page or accessing it directly by the URL causes the last image to be replaced it with the previous one. That page leads to this markdown file: https://github.com/toolbox-kobavzw/toolbox-handleiding/blob/master/docs/leerlingenrekeningen/3.%20Schooljaar/index.mdx?plain=1 My repository is open, so feel free to use it to debug the issue. |
This is likely to be fixed in Docusaurus v3 with React 18, I'm going to release the first alphas very soon but in the meantime you can use a canary release. Please try to upgrade to a canary/alpha/beta/rc (or v3 once released) and if it's not fixed we'll debug it. It is not worth spending time debugging existing sites considering the issue might already be fixed |
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.Description
In some blog entries with several pictures, the last picture is overridden by the previous picture when reloading the page.
I've setup the smallest blog entry that I've been able to create that will reproduce the issue in this project: https://github.com/pgrange/docusaurus-final-picture
I'm sorry I did not see https://new.docusaurus.io/ before trying to qualify the issue, I hope you can work with that.
The project has been created with:
Then the following commit creates a blog entry which exhibits the issue.
The issue can be seen on the following page (when running locally): http://localhost:3000/blog/2023-05
Reproducible demo
http://localhost:3000/blog/2023-05 (sorry)
Steps to reproduce
Then go to the following page: http://localhost:3000/blog/2023-05
You should see three images, a 1, a 2 and a 3.
Click reload.
Expected behavior
You should still see three images, a 1, a 2 and a 3 after reloading the page.
Actual behavior
You see a 1, a 2 and a 2 again. The 3 has been replaced by the 2.
Your environment
Self-service
The text was updated successfully, but these errors were encountered: