[v2] gatsby-plugin-offline non index roots don't load when offline

[jamesadarich]

Description

When I return to a page offline that I have previously loaded whilst online the page does not load and shows the browser standard no internet connection page. When I do this on the index page the page loads fine and I can navigate to the pages that don't work. All the pages that don't work are built from markdown dynamically as they are blog articles.

Steps to reproduce

1. navigate to a blog article

2. take device offline

3. reload the page

4. notice standard no internet page

5. navigate to index page

6. take device offline

7. reload the page

8. notice the site loads fine

Expected result

The site should load as if offline

Actual result

The site failed to load

Environment

System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i7-4700MQ CPU @ 2.40GHz
Binaries:
npm: 5.6.0 - ~\AppData\Roaming\npm\npm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: next => 2.0.0-beta.4
gatsby-cli: next => 2.0.0-beta.2
gatsby-image: next => 2.0.0-beta.2
gatsby-plugin-canonical-urls: next => 2.0.0-beta.2
gatsby-plugin-favicon: ^2.1.1 => 2.1.1
gatsby-plugin-google-tagmanager: next => 2.0.0-beta.2
gatsby-plugin-manifest: next => 2.0.2-beta.2
gatsby-plugin-offline: next => 2.0.0-beta.2
gatsby-plugin-react-helmet: next => 3.0.0-beta.2
gatsby-plugin-sass: next => 2.0.0-beta.2
gatsby-plugin-sharp: next => 2.0.0-beta.2
gatsby-plugin-sitemap: next => 2.0.0-beta.2
gatsby-plugin-typescript: next => 2.0.0-beta.2
gatsby-remark-copy-linked-files: next => 2.0.0-beta.2
gatsby-remark-images: next => 2.0.1-beta.3
gatsby-remark-prismjs: next => 3.0.0-beta.2
gatsby-source-filesystem: next => 2.0.1-beta.2
gatsby-transformer-remark: next => 2.1.1-beta.2
gatsby-transformer-sharp: next => 2.1.1-beta.2

error The system cannot find the path specified.

Error: The system cannot find the path specified.

File contents (if changed)

gatsby-config.js: N/A

import * as path from "path";

interface GatsbyConfig {
  siteMetadata: {
    siteUrl: string;
    title: string;
  };
  plugins: Array<string | { resolve: string; options?: object }>;
}

const SITE_NAME = "James Adarich";
const SITE_URL = `https://${process.env.SITE_DOMAIN}`;

const GATSBY_CONFIG: GatsbyConfig = {
  siteMetadata: {
    siteUrl: SITE_URL,
    title: SITE_NAME
  },
  plugins: [
    // core templates
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-typescript",
    "gatsby-plugin-sass",
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    "gatsby-plugin-offline",

    {
      resolve: "gatsby-plugin-favicon",
      options: {
        logo: "./src/images/favicon.png",
        injectHTML: true,
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: false,
          favicons: true,
          firefox: true,
          twitter: false,
          yandex: false,
          windows: false
        }
      }
    },

    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: SITE_NAME,
        short_name: SITE_NAME,
        start_url: "/",
        background_color: "#eee",
        theme_color: "#eee",
        display: "minimal-ui",
        icons: [
          {
            src: "/favicons/apple-touch-icon-72x72.png",
            sizes: "72x72",
            type: "image/png"
          },
          {
            src: "/favicons/apple-touch-icon-114x144.png",
            sizes: "144x144",
            type: "image/png"
          },
          {
            src: "/favicons/apple-touch-icon-180x180.png",
            sizes: "180x180",
            type: "image/png"
          }
        ]
      }
    },

    // markdown plugins
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: path.resolve("./src"),
        name: "markdown-pages"
      }
    },
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          "gatsby-plugin-sharp",
          "gatsby-remark-copy-linked-files",
          {
            resolve: "gatsby-remark-prismjs",
            options: {
              // Class prefix for <pre> tags containing syntax highlighting;
              // defaults to 'language-' (eg <pre class="language-js">).
              // If your site loads Prism into the browser at runtime,
              // (eg for use with libraries like react-live),
              // you may use this to prevent Prism from re-processing syntax.
              // This is an uncommon use-case though;
              // If you're unsure, it's best to use the default value.
              classPrefix: "line-numbers language-"
            }
          },
          {
            resolve: "gatsby-remark-images",
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 1000
            }
          }
        ]
      }
    },

    // SEO plugins
    {
      resolve: "gatsby-plugin-canonical-urls",
      options: {
        siteUrl: SITE_URL
      }
    },
    {
      resolve: "gatsby-plugin-sitemap",
      options: {
        query: `
        {
          site {
            siteMetadata {
              siteUrl
            }
          }
          allSitePage(
            filter: {
              path: {
                regex: "${/^(?!\/(dev-404-page|404|offline-plugin-app-shell-fallback|500)).*$/}"
              }
            }
          ) {
            edges {
              node {
                path
              }
            }
          }
        }`
      }
    }
  ]
};

if (process.env.GOOGLE_TAG_MANAGER_ID) {
  GATSBY_CONFIG.plugins.push({
    resolve: "gatsby-plugin-google-tagmanager",
    options: {
      id: process.env.GOOGLE_TAG_MANAGER_ID,
      includeInDevelopment: false
    }
  });
}

export = GATSBY_CONFIG;

package.json: N/A

{
  "license": "MIT",
  "scripts": {
    "build": "npm run build:server && npm run build:gatsby",
    "build:server": "tsc server/startup.ts --module commonjs --target esnext",
    "build:gatsby": "tsc gatsby-browser.ts gatsby-config.ts gatsby-node.ts gatsby-ssr.ts --module commonjs --target esnext && gatsby build",
    "develop": "npm run build && gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "lint": "npm run lint:sass && npm run lint:typescript",
    "lint:fix": "npm run lint:sass:fix && npm run lint:typescript:fix",
    "lint:sass": "sass-lint \"**/*.scss\" --ignore \"node_modules/**/*.*\"",
    "lint:sass:fix": "sass-lint \"**/*.scss\" --ignore \"node_modules/**/*.*\" --fix ",
    "lint:typescript": "tslint \"**/*.ts\" \"**/*.tsx\" --exclude \"node_modules/**/*.*\"",
    "lint:typescript:fix": "tslint --fix \"**/*.ts\" \"**/*.tsx\" --exclude \"node_modules/**/*.*\"",
    "start": "node ./server/startup.js",
    "test": "npm run lint"
  },
  "dependencies": {
    "express": "^4.16.2"
  },
  "devDependencies": {
    "@types/express": "^4.11.1",
    "@types/glob": "^5.0.35",
    "@types/node": "^8.10.10",
    "@types/prop-types": "^15.5.2",
    "@types/react-helmet": "^5.0.4",
    "core-js": "^2.5.7",
    "eslint": "^4.19.1",
    "gatsby": "next",
    "gatsby-cli": "next",
    "gatsby-image": "next",
    "gatsby-plugin-canonical-urls": "next",
    "gatsby-plugin-favicon": "^2.1.1",
    "gatsby-plugin-google-tagmanager": "next",
    "gatsby-plugin-manifest": "next",
    "gatsby-plugin-offline": "next",
    "gatsby-plugin-react-helmet": "next",
    "gatsby-plugin-sass": "next",
    "gatsby-plugin-sharp": "next",
    "gatsby-plugin-sitemap": "next",
    "gatsby-plugin-typescript": "next",
    "gatsby-remark-copy-linked-files": "next",
    "gatsby-remark-images": "next",
    "gatsby-remark-prismjs": "next",
    "gatsby-source-filesystem": "next",
    "gatsby-transformer-remark": "next",
    "gatsby-transformer-sharp": "next",
    "glob": "^7.1.2",
    "graphql": "^0.13.2",
    "node-sass": "^4.9.0",
    "prettier": "^1.10.2",
    "prismjs": "^1.15.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-helmet": "^5.2.0",
    "sass-lint": "^1.12.1",
    "tslint": "^5.9.1",
    "tslint-plugin-prettier": "^1.3.0",
    "typescript": "^2.7.2",
    "webpack": "^4.12.0"
  }
}

gatsby-node.js: N/A

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

// You can delete this file if you're not using it

// blog stuff
import * as path from "path";
import * as fs from "fs";
import * as zlib from "zlib";
import * as glob from "glob";

exports.createPages = ({ boundActionCreators, graphql }: any) => {
  const { createPage } = boundActionCreators;

  const blogPostTemplate = path.resolve(`src/components/blog-post.tsx`);

  return graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `).then((result: any) => {
    if (result.errors) {
      return Promise.reject(result.errors);
    }

    result.data.allMarkdownRemark.edges.forEach(({ node }: any) => {
      createPage({
        path: node.frontmatter.path,
        component: blogPostTemplate,
        context: {} // additional data can be passed via context
      });
    });
  });
};

exports.onPostBuild = (pages: any) => {
  const publicPath = path.join(__dirname, "public");
  const gzippable = glob.sync(`${publicPath}/**/?(*.html|*.js|*.css)`);
  gzippable.forEach((file: any) => {
    const content = fs.readFileSync(file);
    const zipped = zlib.gzipSync(content);
    fs.writeFileSync(`${file}`, zipped);
  });
};

gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[jamesadarich]

This is from a project upgrading from v1 where the functionality worked fine previously

[m-allanson]

Could you link to a repo or create a small example repo that does this?

[jamesadarich]

https://github.com/jamesadarich/james.adarich.com

My V2 migration progress is visible as a pull request

[m-allanson]

@jamesadarich I wasn't able to get your site to build - either master or your version two branch.

In your repo I did the following steps:

• npm install
• npm run build
• gatsby serve
• open http://localhost:9000

For both branches, the generated site code looks like this:

Opening public/index.html, my editor warns me with "The file is not displayed in the editor because it is either binary or uses an unsupported text encoding. Do you want to open it anyway?".

If I open the file anyway, it renders like:

��������������۶�������I ڒ�_'�����fhӢi�
���%�b,��H������HJ�������Z�,���}�P�ͳ�߾������E2��7���$]�-�Z�LI��I�$ȏH��ʹU��O�~9�I�a�s��������<Ɉd˘Z�穤)�atN���W�$�s��M�s��ܰ@F��1�b�`#�2�H��Ob:wm$���k,9����\��r�S$w��t+����
�$8�i8���0��.�c��8#+*0K���Rl{C��,��p��\�Cg<���=�e�[�)�;��X�79�2����5�z��|v��"��b�H��W,�K.%O<7��} ԓ|M����D�|�$�z��"
����X�����!^͕�

Any ideas on what's causing that?

[jamesadarich]

@m-allanson I believe this is because the assets are gzipped for production and npm start should start a compatible server

[jamesadarich]

Hey @KyleAMathews, I've just updated all gatsby related stuff and this issue is still happening. Have I missed something else that I need to do?

[KyleAMathews]

Do you have a way to reproduce this? Can you see the problem on gatsbyjs.com?