Does my Gatsby project have a react's rehydration issue?

Question

I'm writing a simple project using Gatsby, Grommet and React, basically reads a markdown file then renderer; following the gatsby tuturials.

Everything is Ok, except on the first load of any page.

The main content disappear soon after it render itself. If the JavaScript is disabled, the issue doesn't happen. So, I think I committed some mistake that impedes React's rehydration.

Bellow there a link to a video of the issue happening, the source-code and a public URL for test.

I'm pulling my hairs out, thanks in advance for any tip!

Links:

Have you tried running `gatsby clean` to clear the cache? It _seems_ like you just have a caching issue, but hard to tell. — mootrichard, Dec 17 '19 at 22:58
yes, always `gatsby clean && rm -rf .cache public && gatsby build && gatsby serve`. — Rodrigo, Dec 17 '19 at 23:27
may be the `dangerouslySetInnerHTML`? I never used this before — Rodrigo, Dec 18 '19 at 00:19

score 1 · Accepted Answer · answered Dec 18 '19 at 18:35

The reason this is happening is due to gatsby-plugin-offline. On the initial render, you're seeing the correct post, but then the service worker is attempting to serve from cache. The cache doesn't appear to have the image, so when it re-renders it shows up blank.

I tested this by disabling gatsby-plugin-offline and everything showed up as it does in development.

This appears to only crop up after building and serving the static content.

It seems this could be related to this issue: https://github.com/gatsbyjs/gatsby/issues/11830

Does my Gatsby project have a react's rehydration issue?

1 Answers1