Errors in MDX Rendering on first load about maggieappleton.com HOT 9 CLOSED

Another example of the same issue logged: #113

from maggieappleton.com.

Also having trouble getting libraries like greensock to load which I have a sneaky feeling is related to this: #105

from maggieappleton.com.

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.

from maggieappleton.com.

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.

from maggieappleton.com.

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: gatsbyjs/gatsby#1994

from maggieappleton.com.

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.

from maggieappleton.com.

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!

from maggieappleton.com.

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).

from maggieappleton.com.

Cool, will do
Thanks 🙌

from maggieappleton.com.