profile
viewpoint

Ask questionsLoading chunks while a new release is deployed

Description

I think there is a structural issue with the lazy loading of page chunks. I came across various ChunkLoadErrors in Sentry reports, and just now it happened to me in Chrome, and it happened when I had loaded a page, then deployed a new version (via Netlify), and then tried to navigate to another page without a full page reload: the new deployed chunks have different paths, so the Gatsby Links can't find the ones it knew... throwing 404s and resulting in not being able to navigate!

Steps to reproduce

You can easily reproduce this by deploying, going to the website, changing code & deploying again, and then trying to navigate to another page.

Otherwise, let me know and I'll setup a test website.

Expected result

The navigation should always work.

Actual result

Nothing happens when the visitor tries to navigate to another page.

Possible fixes

A fix could be to fallback to normal navigation (full page reload), instead of letting the visitor on the same page without any reaction...

Now, I read on other issues that it's supposed to fail because maybe the user if offline and we can't detect it: I disagree, there is a difference between a failed fetch because of network issues) and a 404, and it can be detected in Javascript (and maybe use NavigatorOnLine if available, too).

Environment

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.10.3 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 77.0.3865.120
    Firefox: 69.0
    Safari: 13.0.2
  npmPackages:
    gatsby: ^2.15.29 => 2.15.29
    gatsby-image: ^2.2.24 => 2.2.24
    gatsby-plugin-google-analytics: ^2.1.20 => 2.1.20
    gatsby-plugin-manifest: ^2.2.20 => 2.2.20
    gatsby-plugin-netlify: ^2.1.17 => 2.1.17
    gatsby-plugin-offline: ^3.0.11 => 3.0.11
    gatsby-plugin-react-helmet: ^3.1.10 => 3.1.10
    gatsby-plugin-sharp: ^2.2.28 => 2.2.28
    gatsby-plugin-sitemap: ^2.2.16 => 2.2.16
    gatsby-plugin-styled-components: ^3.1.8 => 3.1.8
    gatsby-plugin-typescript: ^2.1.11 => 2.1.11
    gatsby-source-contentful: ^2.1.45 => 2.1.45
    gatsby-source-filesystem: ^2.1.29 => 2.1.29
    gatsby-transformer-inline-svg: ^0.0.1 => 0.0.1
    gatsby-transformer-sharp: ^2.2.20 => 2.2.20

Related issues

#11194 #2954

gatsbyjs/gatsby

Answer questions GooBall

Same issue here.

To replicate (as of v2.16.1):

  1. Clone the base Gatsby starter.
  2. Run gatsby build.
  3. Run gatsby serve.
  4. Go to localhost:9000/, open network tools and hover over the "Go to page 2" link and see the network requests get made for component---src-pages-page-2-js-[HASH].js.
  5. Go to your ./public/ folder and delete component---src-pages-page-2-js-[HASH].js.
  6. Go back to localhost:9000/ do not refresh and hover over the "Go to page 2" link. This time you will see a 404 for loading the chunk.

The above steps are what a user would experience if they were navigating a site as a new build was deployed. The user will go to click something and nothing will happen - only a page refresh will fix the issue in those cases.

I would be happy to help fix but might need pointing in the right direction as I haven't poked around in the Gatsby code to much.

useful!

Related questions

Error: Cannot create as TypeComposer the following value: Date. hot 3
Importing Link from gatsby breaks Storybook hot 2
Webpack error #98123 when running "gatsby develop" hot 2
gatsby build error #11328 A page component must export a React component for it to be valid. Please make sure this file exports a React component: /Users/tiagosanchez/Documents/Projects/personalBlog/node_modules/gatsby-plugin-offline/app-shell.js hot 2
[gatsby-telemetry] error: src/postinstall.js not found in Linux environments hot 2
IE11: Object not valid as React Child hot 2
CircleCI build Error: spawn ENOMEM hot 2
[Help] I somehow managed to butcher my site's performance hot 2
Build gets stuck at Generating image thumbnails / Update schema on large sites hot 2
[gatsby-source-graphql] Shopify GraphQL Schema Error hot 2
UNHANDLED REJECTION Source and destination must not be the same. hot 2
gatsby-source-shopify unable to complete build hot 2
Gatsby's Use Of Polyfills and the 'Missing Resources for x' error hot 2
Autoprefixer "browsers" option is deprecated in v9, produces warnings hot 2
'gatsby' is not recognized as an internal or external command hot 2
Github User Rank List