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

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.