Repository: gatsbyjs/gatsby

Issue #3582: Website fails to load completely
Created: 2018-01-18T16:20:09Z
Description
Since I started using Gatsby a couple of months ago, I regularly get issues when visiting the published site. No issue in local development. The issue gets fixed when hitting Ctrl-Shift-R, but I can hardly expect all my visitors to do this every time...
I just see this error in the console:

The bootstrap%2003bd3a01b7024eecaa93:52 file shows this:
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
This is in a file whose description is // install a JSONP callback for chunk loading.
Is this something to do with chunk loading which breaks because of gatsby-plugin-offline? My setup is very similar to the gatsbyjs.org codebase, so I think that the Gatsby site has the same issue, as I reported previously in #3142.
Do you have any idea of the underlying cause and the proper way to fix this? If there's no proper fix, is there a workaround such as disabling service worker entirely?
Unfortunately chunking and caching are still way above my skillset, but this is directly impacting our visitors.
Environment
Gatsby version: 1.9.158 and all my packages/plugins are up to date
Node.js version: v8.9.4 (npm v5.6.0)
File contents (if changed):
gatsby-config.js:

const siteMetadata = require('./src/data/site-metadata')

module.exports = {
  siteMetadata,
  mapping: {
    'MarkdownRemark.frontmatter.author': `AuthorYaml`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: `${__dirname}/src/pages`,
      },
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    {
      resolve: `gatsby-plugin-canonical-urls`,
      options: {
        siteUrl: siteMetadata.siteUrl,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-transformer-documentationjs`,
    `gatsby-transformer-yaml`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 786,
              backgroundColor: `#ffffff`,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.05rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
          `gatsby-remark-autolink-headers`,
        ],
      },
    },
    {
      resolve: `gatsby-plugin-nprogress`,
      options: {
        color: `#9D7CBF`,
        showSpinner: false,
      },
    },
    `gatsby-plugin-glamor`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-catch-links`,
    `gatsby-plugin-react-next`,
    `gatsby-plugin-lodash`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Imagine Clarity`,
        short_name: `Imagine Clarity`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#5c2965`,
        display: `minimal-ui`,
        icons: [
          {
            src: `/android-chrome-192x192.png`,
            sizes: `192x192`,
            type: `image/png`,
          },
          {
            src: `/android-chrome-512x512.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-offline`,
      options: {
        navigateFallback: null,
        navigateFallbackWhitelist: [],
      },
    },
    `gatsby-transformer-csv`,
    {
      resolve: `gatsby-plugin-intercom-spa`,
      options: {
        app_id: process.env.INTERCOM_APP_ID,
      },
    },
    `gatsby-plugin-twitter`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: 'gatsby-plugin-i18n',
      options: {
        langKeyForNull: 'any',
        langKeyDefault: siteMetadata.defaultLangKey,
        useLangKeyLayout: true,
        pagesPaths: [ '/src/pages' ],
        markdownRemark: {
          postPage: 'src/templates/blog-post.js',
          query: `
          {
            allMarkdownRemark {
              edges {
                node {
                  fields {
                    slug
                    langKey
                  }
                }
              }
            }
          }`
        }
      }
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `xxx`,
      },
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: `gatsby-plugin-feed`,
      feeds: [
        {
          query: `
            {
              allMarkdownRemark(
                sort: { order: DESC, fields: [frontmatter___date] }
                filter: {
                  frontmatter: { draft: { ne: true } }
                  fileAbsolutePath: { regex: "/blog/" }
                }
              ) {
                edges {
                  node {
                    excerpt
                    html
                    frontmatter {
                      title
                      date
                      excerpt
                      author {
                        name
                      }
                    }
                    fields {
                      slug
                    }
                  }
                }
              }
            }
          `,
          output: `/blog/rss.xml`,
          setup: ({ query: { site: { siteMetadata } } }) => {
            return {
              title: siteMetadata.title,
              description: siteMetadata.description,
              feed_url: siteMetadata.siteUrl + `/blog/rss.xml`,
              site_url: siteMetadata.siteUrl,
              generator: `GatsbyJS`,
            }
          },
          serialize: ({ query: { site, allMarkdownRemark } }) =>
            allMarkdownRemark.edges.map(({ node }) => {
              return {
                title: node.frontmatter.title,
                description: node.frontmatter.excerpt || node.excerpt,
                url: site.siteMetadata.siteUrl + node.fields.slug,
                guid: site.siteMetadata.siteUrl + node.fields.slug,
                custom_elements: [{ 'content:encoded': node.html }],
                author: node.frontmatter.author.slug,
              }
            }),
        },
      ],
    },
  ],
}


package.json:

{
  "name": "imagine-clarity",
  "description": "Imagine Clarity",
  "version": "1.0.0",
  "author": "Sébastien Dubois <sebastien.dubois@imagineclarity.com>",
  "dependencies": {
    "bluebird": "^3.4.6",
    "gatsby": "^1.9.127",
    "gatsby-image": "^1.0.5",
    "gatsby-link": "^1.6.16",
    "gatsby-plugin-canonical-urls": "^1.0.6",
    "gatsby-plugin-catch-links": "^1.0.8",
    "gatsby-plugin-feed": "^1.3.9",
    "gatsby-plugin-glamor": "^1.6.7",
    "gatsby-plugin-google-analytics": "^1.0.7",
    "gatsby-plugin-i18n": "^0.4.0",
    "gatsby-plugin-intercom-spa": "^0.0.5",
    "gatsby-plugin-lodash": "^1.0.0",
    "gatsby-plugin-manifest": "^1.0.7",
    "gatsby-plugin-nprogress": "^1.0.7",
    "gatsby-plugin-offline": "^1.0.9",
    "gatsby-plugin-react-helmet": "^2.0.1",
    "gatsby-plugin-react-next": "^1.0.0",
    "gatsby-plugin-sharp": "^1.6.7",
    "gatsby-plugin-sitemap": "^1.2.5",
    "gatsby-plugin-twitter": "^1.0.10",
    "gatsby-plugin-typography": "^1.7.9",
    "gatsby-remark-autolink-headers": "^1.4.7",
    "gatsby-remark-copy-linked-files": "^1.5.7",
    "gatsby-remark-images": "^1.5.11",
    "gatsby-remark-prismjs": "^1.2.8",
    "gatsby-remark-responsive-iframe": "^1.4.7",
    "gatsby-remark-smartypants": "^1.4.7",
    "gatsby-source-filesystem": "^1.4.12",
    "gatsby-transformer-csv": "^1.3.5",
    "gatsby-transformer-documentationjs": "^1.4.6",
    "gatsby-transformer-remark": "^1.7.7",
    "gatsby-transformer-sharp": "^1.6.5",
    "gatsby-transformer-yaml": "^1.5.7",
    "intl": "^1.2.5",
    "lodash": "^4.16.6",
    "mitt": "^1.1.2",
    "parse-filepath": "^1.0.1",
    "ptz-i18n": "0.4.0",
    "react-helmet": "^5.2.0",
    "react-icons": "^2.2.3",
    "react-id-swiper": "^1.5.5",
    "react-intl": "^2.4.0",
    "react-player": "^1.1.1",
    "slash": "^1.0.0",
    "typeface-crimson-text": "^0.0.44",
    "typography-breakpoint-constants": "^0.15.10",
    "webfontloader": "^1.6.28"
  },
  "keywords": [
    "meditation"
  ],
  "license": "MIT",
  "main": "n/a",
  "private": true,
  "scripts": {
    "dev": "gatsby develop -H localhost",
    "build": "gatsby build",
    "start": "gatsby serve",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}


gatsby-node.js:

const Promise = require(`bluebird`)
const path = require(`path`)
const slash = require(`slash`)

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators
  return new Promise((resolve, reject) => {
    const authorPageTemplate = path.resolve(`src/templates/author-page.js`)
    // Query for markdown nodes to use in creating pages.
    resolve(
      graphql(
        `
          {
            # allMarkdownRemark(
            #   sort: { order: DESC, fields: [frontmatter___date] }
            #   limit: 1000
            # ) {
            #   edges {
            #     node {
            #       fields {
            #         slug
            #       }
            #       frontmatter {
            #         title
            #         draft
            #         canonicalLink
            #         publishedAt
            #       }
            #     }
            #   }
            # }
            allAuthorYaml {
              edges {
                node {
                  slug
                }
              }
            }
          }
        `
      ).then(result => {
        // Create author pages.
        result.data && result.data.allAuthorYaml.edges.forEach(edge => {
          createPage({
            path: edge.node.slug,
            component: slash(authorPageTemplate),
            context: {
              slug: edge.node.slug,
            },
          })
        })
      })
    )
  })
}

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-html') {
    config.loader('null', {
      test: /webfontloader/,
      loader: 'null-loader'
    })
  }
}


gatsby-browser.js: not changed
gatsby-ssr.js: not changed
Actual result
The page only loads partially. Presumably, the browser only loads some cached assets but doesn't initialize Javascript properly. Visually the main image will remain blurred instead of loading fully. Or even the first redirect (from / to /en) might also fail, so it doesn't load the content at all. This happens with my Firefox browser but also observed on my Chrome.
Expected behavior
Page shouldn't fail to load.
Steps to reproduce
Happens regularly (but not always) when I deploy. Please let me know if there's something else I can provide to investigate.
Thanks a lot for your time and keep up the good work!

Duplicate issue #3142: New blog post gives error on first load
Created: 2017-12-06T08:06:29Z
The full images did not load on my first visit of the new blog post. (Second time was fine.) Using Chrome 62.0.3202.94 (Official Build) (64-bit) on macOS. Unfortunately I closed the window before noting exactly which file threw the error (I seem to remember from a mouse hover that it was something with prop-types).
I can't reproduce the issue by visiting the page from a private session.

Closing comment (2018-01-26T19:29:43Z): Closing as duplicate of #3582.