Gatsby: Html content from markdown disappears on refresh

[sogasg]

When clicking on a link in my webpage to get to another page everything works, but when I reload a page or go directly to a specific page (https://www.hallingdata.no/om-oss) the html-content from markdown flashes then disappears.

This problem is not present when running gatsby develop.

I have kind of found a workaround that I have used on this page (https://www.hallingdata.no/kontakt-takk/):

  const html = data.thankYouContactPage.childMarkdownRemark.html
  return (
      <Grid container className={classes.contentContainer} spacing={0}>
        <Grid item xs={12}>
          <Typography
            style={{display: "none"}}
            type="body1"
            gutterBottom
            align="justify"
            className={classes.content}
            dangerouslySetInnerHTML={{ __html: html }}
            hidden
          />
          <Typography
            type="body1"
            gutterBottom
            align="justify"
            className={classes.content}
            dangerouslySetInnerHTML={{ __html: html }}
          />
        </Grid>
      </Grid>
  )

This results in the page first displaying two instances of the html-content, then after 1 second or so, only one instance is displayed. If I remove the first instance of Typography the content flashes then disappears.

Query

export const pageQuery = graphql`
  query ThankYouContactContent {
    thankYouContactPage: file(relativePath: { eq: "content/kontakt-takk_page.md" }) {
      childMarkdownRemark {
        html
        frontmatter {
          header
        }
      }
    }
  }
`

[KyleAMathews]

Can you build a simple site reproducing this problem? This could be a dozen different things. If there's something about gatsby that's causing this, we definitely want to solve it.

[sogasg]

Thanks for the quick reply :)
Here is the sample: https://github.com/sogasg/gatsby-error

[KyleAMathews]

Your sample site works fine once I remove the html.jsx file so the default html.js is used.

Generally you shouldn't override the html.js as it needs setup in a specific way — this is the default https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/default-html.js

Your html.jsx wasn't using most of the required props.

https://www.gatsbyjs.org/docs/building-with-components/#html-component

[sogasg]

Apparently, I was a little too eager when stripping down the sample. Sorry about that.

However, now I have removed the html.jsx file and the problem is still there (when I run npm run build and then npm run serve)

[KyleAMathews]

Looks like you ran into this https://github.com/facebook/react/issues/5479

Use <div> instead.

Also, you should use the gatsby-link component.

Also, please never email me to remind me to look at your issue. If an issue is ever urgent, I'm available for paid consulting but otherwise, I provide support as I have time / motivation and nagging me is a good way for that motivation to disappear.

[sogasg]

Thank you so much :)

I am genuinely sorry about that. It was not my intention to be "nagging" you.

[KyleAMathews]

I am genuinely sorry about that. It was not my intention to be "nagging" you.

Yeah, sorry about that — there was a really big pile of issues earlier :-) but just for future reference, it's bad form to email maintainers directly unless you're paying them or best friends or something.

[cesarvarela]

Just got bitten by this, is possible to show a warning or something somewhere?

[alexabruck]

Bitten +1