Last picture overriden on reload

[pgrange]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

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:

npx create-docusaurus@latest docusaurus-final-picture classic

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

git clone https://github.com/pgrange/docusaurus-final-picture.git
cd docusaurus-final-picture
yarn
yarn build
yarn serve

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

• Public source code: https://github.com/pgrange/docusaurus-final-picture
• Public site URL: none
• Docusaurus version used: 2.4.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Safari 16.5, Node.js v19.8.1
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOs 13.4

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Thank you for the great repro! Very easy to follow. I'll try to investigate.

[Josh-Cena]

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.

[pgrange]

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:

<img loading="lazy" alt="Third picture" src="/assets/images/3-802964b3f2763fcb7b9245721bd8c9ca.jpg" width="1868" height="2140" class="img_ev3q">

If I hit reload now, picture 3 html source code becomes:

<img loading="lazy" alt="Second picture" src="/assets/images/2-98f85917bd3f9e6fa6724066c22455d8.jpg" width="1868" height="2140" class="img_ev3q">

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.

[pgrange]

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.

[slorber]

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.

[slorber]

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>

[Josh-Cena]

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.

[slorber]

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