0

Update: the below has been resolved, but I'm running into a similar issue:

In my gallery template (for an example page see here everything loads fine if navigated to via the site. On refresh, the grid parent div (GalleryGrid in styled-components) is erased/unstyled/replaced with a blank div. This actually happens after refresh, during Gatsby's hydration.

I've tried replacing the styled component with a regular div styled manually, with no luck. Unsure what's going on!

I'm running into a really strange error!

I've built a site using Gatsby, sourcing from Prismic.io, and using styled-components to style. I use framer-motion for page transitions and have added my layout component to gatsby-browser so that only page content gets transitioned, and have added similar code to gatsby-ssr to fix some initial ssr errors.

What's happening now is that whenever a page other than an index is visited directly (try this one) some components are not rendered properly. On this example, the date towards the top of the page is replaced with a <Body> component (which is styled differently to the intended <Date> component), and the actual content has been truncated and only shows the first <p>.

If you navigate to the 'portfolio' section and then navigate back to the Catalogue page, the page shows correctly - the date is now a <Date> component and the whole body text is displayed.

A similar error happens with 'essay' nodes - for example, on this page the image is intended to be in a component called ImageContainer but is replaced by an extra EssayContainer when refreshed or accessed directly (instead of navigating to the page via site navigation).

I honestly have no clue what's going on here or what could be causing this error - whether I've done something wrong or this is a bug in Gatsby's SSR or styled-components/the gatsby SC plugin. It works as expected when running gatsby develop, so must be something in the build or the SSR.

My gatsby-browser:

const transitionDelay = 500

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

export const shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition,
}) => {
  if (location.action === "PUSH") {
    window.setTimeout(() => window.scrollTo(0, 0), transitionDelay)
  } else {
    const savedPosition = getSavedScrollPosition(location)
    window.setTimeout(
      () => window.scrollTo(...(savedPosition || [0, 0])),
      transitionDelay
    )
  }
  return false
}

And my gatsby-ssr:

const transitionDelay = 500

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

And my repo is here.

Any help is greatly appreciated!

jenniferkshields
  • 71
  • 1
  • 7

1 Answers1

0

This turned out to be two issues!

The problem with some components being swapped on build was due to a media query library I was using - react-responsive- not having SSR support. I migrated to @artsy/fresnel and that resolved a bunch of the issues.

The problem with the content being truncated seems to be an issue with styled-components not playing so nicely with SSR. I had styled components setting inner HTML directly - nesting another div inside the component and setting the html from there did the trick:

<Description>
          <div
            dangerouslySetInnerHTML={{
              __html: data.prismicGallery.data.description.html,
            }}
          />
        </Description>

This resolves almost everything - I'm still having a problem with Gatsby's hydration replacing/unstyling some elements, but I suspect that's a different issue (added to original question).

jenniferkshields
  • 71
  • 1
  • 7