Gatsby: Navigation to new page ends in 404 when old SW is present

[flipactual]

Description

I'm using gatsby on https://literally.fyi/ and people are reporting that when they have an existing SW for the site and I push new content and link them to it, they land on the 404 page (and I'm seeing it as well)

Environment

Gatsby version: 1.8.12
Node.js version: 8.9.0
Operating System: macOS High Sierra 10.13.3 Beta (17D34a)

File contents (if changed):

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'literally.fyi',
    description: '',
    domain: 'https://literally.fyi',
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/sources`,
      },
    },
    `gatsby-transformer-javascript-static-exports`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-emojis',
            options: {
              active: true,
              class: 'emoji-icon',
              size: 64,
              styles: {
                display: 'inline',
                margin: '0',
                'margin-top': '1px',
                position: 'relative',
                top: '5px',
                width: '25px',
              },
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 720,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          'gatsby-remark-prismjs',
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-smartypants',
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `UA-112235525-1`,
      },
    },
    `gatsby-plugin-offline`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
        {
          site {
            siteMetadata {
              title
              description
              domain
            }
          }
        }
      `,
        feeds: [
          {
            serialize: ({ query: { site, allMarkdownRemark } }) =>
              allMarkdownRemark.edges.map(edge => ({
                ...edge.node.frontmatter,
                description: edge.node.excerpt,
                url: `${site.siteMetadata.domain}${edge.node.frontmatter.path}`,
                guid: `${site.siteMetadata.domain}${
                  edge.node.frontmatter.path
                }`,
                /* eslint-disable camelcase */
                custom_elements: [{ 'content:encoded': edge.node.html }],
                /* eslint-enable camelcase */
              })),
            query: `
            {
              allMarkdownRemark(
                limit: 1000,
                sort: { fields: [frontmatter___date], order: DESC }
              ) {
                edges {
                  node {
                    excerpt
                    html
                    frontmatter {
                      title
                      date
                      path
                    }
                  }
                }
              }
            }
          `,
            output: '/rss.xml',
          },
        ],
      },
    },
  ],
};

package.json

{
  "private": true,
  "name": "literally.fyi",
  "description": "💁🏼\u200d",
  "version": "1.0.0",
  "author": "Flip",
  "dependencies": {
    "gatsby": "^1.8.12",
    "gatsby-link": "^1.6.8",
    "gatsby-plugin-feed": "^1.3.15",
    "gatsby-plugin-google-analytics": "^1.0.4",
    "gatsby-plugin-manifest": "^1.0.4",
    "gatsby-plugin-offline": "^1.0.4",
    "gatsby-plugin-preact": "^1.0.3",
    "gatsby-plugin-react-helmet": "^1.0.3",
    "gatsby-plugin-sharp": "^1.6.2",
    "gatsby-plugin-typography": "^1.7.10",
    "gatsby-remark-copy-linked-files": "^1.5.2",
    "gatsby-remark-emojis": "^0.2.3",
    "gatsby-remark-images": "^1.5.4",
    "gatsby-remark-prismjs": "^1.2.1",
    "gatsby-remark-responsive-iframe": "^1.4.3",
    "gatsby-remark-smartypants": "^1.4.3",
    "gatsby-source-filesystem": "^1.4.3",
    "gatsby-transformer-remark": "^1.7.1",
    "gatsby-transformer-sharp": "^1.6.1",
    "reset-css": "^2.2.1"
  },
  "devDependencies": {
    "@cherihung/eslint-config-gatsby": "^1.0.5",
    "babel-eslint": "^8.1.2",
    "eslint": "^4.15.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "6.0.2",
    "eslint-plugin-prettier": "^2.4.0",
    "eslint-plugin-react": "7.4.0",
    "gatsby-transformer-javascript-static-exports": "^1.3.8",
    "gh-pages": "^0.12.0",
    "prettier": "^1.9.2"
  },
  "scripts": {
    "precommit": "./node_modules/.bin/lint-staged",
    "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
    "develop": "./node_modules/.bin/gatsby develop",
    "patch": "sed -i -e 's/if(c\\.initial) return;/if(!c||c.initial) return;/g' ./node_modules/extract-text-webpack-plugin/index.js",
    "build": "yarn patch &&./node_modules/.bin/gatsby build",
    "deploy": "yarn build --prefix-paths && ./node_modules/.bin/gh-pages -d public",
    "update": "git submodule update --recursive --remote",
    "clean": "rm -rf .cache public"
  }
}

Actual result

Redirected to 404 when outdated SW is present

Expected behavior

SW should be reloaded, content at url should be displayed

Steps to reproduce

1. ship site
2. load site
3. update site with new content path
4. load new content path
5. be redirected to 404

[KyleAMathews]

Hmmm... this should be working — can you try debugging why this code isn't working? https://github.com/gatsbyjs/gatsby/blob/0a1e42cf39f5189a7730d7ef6c818bb8eefbda9e/packages/gatsby/cache-dir/loader.js#L274

[flipactual]

I am getting very inconsistent results (detailed below) – can you let me know what additional information I could provide?

---

First attempt (forgot to add debugger and just logged out some values, new content)

I added a new path, hit it with a cached SW, was redirected to 404, SW was updated, navigated to new path, everything was fine

Second attempt (added debugger, new content)

https://github.com/gatsbyjs/gatsby/blob/0a1e42cf39f5189a7730d7ef6c818bb8eefbda9e/packages/gatsby/cache-dir/loader.js#L285

Didn't stop the reload here like I had hoped, so I didn't see any of my logged values

The SW was reloaded, the page was reloaded, rendered fine, but mapCacheClear (from lodash) threw because Hash was undefined... this also happened on all subsequent loads of all other paths

Does lodash need to be installed in my project? Why is this throwing in one build but not in the previous build when the only code change was adding debugger?

Third attempt (new content)

getTag from lodash throws on each page load until I do commandshiftr, but did load the new page

Fourth attempt (remove yarn.lock and node_modules, new content)

404s, webpack bootstrap throws, reloads SW, does not reload page

[flipactual]

I forgot to mention that when it's lodash that's looking for a value (which ends up being undefined), those variable names are minified

[KyleAMathews]

Not sure where mapCacheClear is coming from as it's not in our code base — perhaps it's in one of our dependencies or in your code?

Also quite possible this issue is affecting you https://github.com/gatsbyjs/gatsby/issues/3582

[flipactual]

mapCacheClear is an internal lodash thing used by (I believe) all lodash functions

[DaleLJefferson]

I'm having the same problem I'm seeing 404 pages instead of the page until refreshing.
Is there any update on this?

[MorganTrudeau]

I'm also experiencing Dale's issue.

[piotrf]

Same here. Has anyone found a work-around for this issue yet?

[m-allanson]

@kkemple is working on improving Gatsby's service worker implementation at the moment - see #5848 and #2757.

[kakadiadarpan]

@m-allanson #5848 and #2757 have been resolved. Has this issue also been resolved along with them?

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[jakemmarsh]

I'm still seeing this issue in 2.0.21. Looks like we're going to have to remove gatsby-plugin-offline for now, as this makes it difficult to circulate new blog posts.

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.