Errors in MDX Rendering on first load

[MaggieAppleton]

Watch this loom video for a full explanation

MDX styling is behaving inconsistently, and not properly rendering if you go to a page directly for the first time. If you refresh the page, everything is fixed. It only happens on first load.

The CSS doesn't load correctly, and any JavaScript libraries like GreenSock fail to execute. The issues happens in all .mdx posts.

I'm speculating it might have something to do with service workers or caching, but don't know how to debug it.

An example of the kind of rendering error that appear, and then disappear after a refresh:

[MaggieAppleton]

Another example of the same issue logged: https://github.com/MaggieAppleton/maggieappleton.com/issues/113

[MaggieAppleton]

Also having trouble getting libraries like greensock to load which I have a sneaky feeling is related to this: https://github.com/MaggieAppleton/maggieappleton.com/issues/105

[MaggieAppleton]

Structural diagrams of the codebase

Notes are passed through an <MDXRenderer> component and an <MDXProvider>, and then rendered through gatsby-theme-brain

All other .mdx files like essays, books, and illustrations are also passed through an <MDXRenderer> component and an <MDXProvider>, but don't go through gatsby-theme-brain. These pages have the same rendering bugs as the notes.

TLDR I don't think gatsby-theme-brain is what's causing the bug, but it could be something in the custom MDX provider situation.

All the .js components that are fed into the MDX renderer are written with emotion CSS-in-JS.

[theianjones]

Service workers are always suspect. Thats why I turn them off :P

Since you are only clearing cookies and not having to jump into the service worker panel in dev tools to fix issues I dont think its service worker related.

My first hunch is that its the static site generated version of the page thats busted (the one that gatsby build builds). The way that we can test that is by runing yarn build in local dev and then yarn serve and going to an mdx post.

[MaggieAppleton]

I have a new working theory on what might be happening here @texastoland @theianjones

I think the CSS stylesheets are loading in the wrong order, or some of them are failing to load on the first render. I use emotion and css-in-js for styling, so if webpack is randomly chucking stylesheets into headers it could be messing up the cascade. This seems relevant: https://github.com/gatsbyjs/gatsby/issues/1994

[texastoland]

I can't reproduce your original issues on the live site anymore:

1. I can't replicate the Twitter styles at all.
2. The duplicate image appears to be persistent now.
3. The random paragraph spacing seems persistent too. It happens when the <p> is missing a generated class name that overrides an auto margin from Typography.js. I suspect it's related to MDX like @theianjones suggested.

@MaggieAppleton Are you seeing the same behavior? Did I miss any? I'd prefer to track them in separate issues if that's cool.

[MaggieAppleton]

I'm still seeing the same issues. Checked on multiple browsers and machines (Safari and Brave) and both behave the same.

To recreate it, I open a link a direct link to the post in a private window (https://maggieappleton.com/garden-history). The image duplicates and the random paragraph styles appear. If I then navigate back to the main page of garden notes by clicking on the menubar link ("Digital Garden") and click on that post directly ("A Brief History & Ethos of the Digital Garden"), the images and paragraph styles are all correct.

Do you see the same thing when you go through that flow?

Re: 1. - Unsure what you mean by the Twitter styles? The Tweets all load fine for me.

@texastoland I'll go split these up into multiple issues. Thanks!

[texastoland]

Oh I get it! The behavior is the reverse of #105. It's another interaction with Gatsby <Link/>. Feel free to close this in favor of the others (and optionally assign them to me).

[MaggieAppleton]

Cool, will do Thanks 🙌