Shopify Question posted in
The Shopify help center can be found here.

Gatsby website loading with white pages and error after update, best way to find the root cause? – Shopify

I am using gatsby. All was working fine recently until I ran npm update as I wanted to ensure I was up to date. Since then I am getting white pages I navigate to with this error

enter image description here

I believe this error is only occurring as the page is not loading and is not the root cause. I am looking to correct the root cause of the page not loading.

Looking around it seemed like this could be a service worker problem So I removed the service works as per gatsby guides but no luck.

The error only occurs when navigating to a page, for example

<Link className="nav-link" to="/news">News</Link>

Directly navigating via the browser address bar works fine as this reloads the page.

This error only occurs on production builds. Are there any gotchas I need to be aware of or has anyone else come across this? Or potentially other things to check?

Gatsby Info

npmPackages:
    gatsby: ^2.23.3 => 2.23.3
    gatsby-image: ^2.4.7 => 2.4.7
    gatsby-plugin-breadcrumb: ^9.1.0 => 9.1.0
    gatsby-plugin-google-analytics: ^2.3.4 => 2.3.4
    gatsby-plugin-manifest: ^2.4.11 => 2.4.11
    gatsby-plugin-react-helmet: ^3.3.4 => 3.3.4
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
    gatsby-plugin-robots-txt: ^1.5.1 => 1.5.1
    gatsby-plugin-sass: ^2.3.4 => 2.3.4
    gatsby-plugin-sharp: ^2.6.11 => 2.6.11
    gatsby-plugin-sitemap: ^2.4.5 => 2.4.5
    gatsby-plugin-stripe: ^1.2.4 => 1.2.4
    gatsby-plugin-styled-components: ^3.3.4 => 3.3.4
    gatsby-source-contentful: ^2.3.15 => 2.3.15
    gatsby-source-filesystem: ^2.3.11 => 2.3.11
    gatsby-source-shopify: ^3.2.11 => 3.2.11
    gatsby-source-stripe: ^3.1.0 => 3.1.0
    gatsby-transformer-remark: ^2.8.15 => 2.8.15
    gatsby-transformer-sharp: ^2.5.5 => 2.5.5
  npmGlobalPackages:
    gatsby-cli: 2.10.2
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Smoking Gun was a plugin I was using

    "embla-carousel" "embla-carousel-react"

    Rolled them back and issues went away, raising an issue on github for the team


  2. 0

    When you updated your npm packages you probably updated embla-carousel-react too, so I think this is because the destruction of the Embla instance has been moved into the package core since version 1.2.11, and is now done automatically when the component unmounts.

    If my assumption is correct and you updated embla-carousel-react to >= version 1.2.11, you’ll have to remove the manual destruction of the carousel instance in your code like so:

    useEffect(() => {
  ...

  // You'll have to remove this line
  return () => embla && embla.destroy();
}, [embla]);

    This was raised in issue 13 by one of my users.

    Let me know if it helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search