Generating output with different contents but the same hash

[markcatley]

Hi,

I am having trouble with some of my js files outputting different content with the same hashes. This gives me javascript exceptions because due to caching I have some files from the old build and some from the new saved in the CDN.

The result is I get Uncaught TypeError: Cannot read property 'call' of undefined in webpackJsonp until I invalidate the cache in the CDN and browser and the browser-based js doesn't work.

package.json:

{
  "name": "",
  "description": "",
  "version": "1.0.0",
  "author": "",
  "dependencies": {
    "gatsby": "^1.9.24",
    "gatsby-image": "^1.0.14",
    "gatsby-link": "^1.6.8",
    "gatsby-plugin-favicon": "^1.0.0",
    "gatsby-plugin-google-tagmanager": "^1.0.7",
    "gatsby-plugin-manifest": "^1.0.4",
    "gatsby-plugin-preact": "^1.0.3",
    "gatsby-plugin-react-helmet": "^1.0.3",
    "gatsby-plugin-sharp": "^1.6.6",
    "gatsby-plugin-typography": "^1.7.6",
    "gatsby-remark-copy-linked-files": "^1.5.7",
    "gatsby-remark-images": "^1.5.10",
    "gatsby-remark-prismjs": "^1.2.1",
    "gatsby-remark-responsive-iframe": "^1.4.3",
    "gatsby-remark-smartypants": "^1.4.3",
    "gatsby-source-filesystem": "^1.4.12",
    "gatsby-transformer-csv": "^1.3.5",
    "gatsby-transformer-json": "^1.0.11",
    "gatsby-transformer-remark": "^1.7.7",
    "gatsby-transformer-sharp": "^1.6.5",
    "gray-percentage": "^2.0.0",
    "lodash": "^4.15.0",
    "node-sass": "^4.5.3",
    "prop-types": "^15.5.10",
    "react": "^15.6.0",
    "react-helmet": "^5.2.0",
    "react-responsive-grid": "^0.3.3",
    "react-router": "^4.2.0",
    "react-twitter-widgets": "^1.7.1",
    "typography": "^0.16.6",
    "typography-breakpoint-constants": "^0.15.10"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.1",
    "eslint": "^4.6.1",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.3.0",
    "prettier": "^1.5.3"
  },
  "license": "UNLICENSED",
  "private": true,
  "main": "n/a",
  "scripts": {
    "dev": "gatsby develop",
    "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public --fix .",
    "test": "echo \"Error: no test specified\" && exit 1",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
    "develop": "gatsby develop",
    "build": "gatsby build"
}

gatsby-node.js:

const _ = require('lodash');
const path = require('path');

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

  return new Promise((resolve, reject) => {
    const blogPost = path.resolve('./src/templates/blog-post.js');
    resolve(graphql(`
          {
            allMarkdownRemark(
              limit: 1000,
              filter: { frontmatter: { published: { eq: true } } }
            ) {
              edges {
                node {
                  frontmatter {
                    path
                  }
                }
              }
            }
          }
        `).then((result) => {
      if (result.errors) {
        /* eslint-disable no-console */
        console.log(result.errors);
        /* eslint-enable no-console */
        reject(result.errors);
      }

      // Create blog posts pages.
      _.each(result.data.allMarkdownRemark.edges, (edge) => {
        createPage({
          path: edge.node.frontmatter.path,
          component: blogPost,
          context: {
            path: edge.node.frontmatter.path,
          },
        });
      });
    }));
  });
};

exports.modifyWebpackConfig = ({ config }) => {
  config.loader('file-loader', {
    query: {
      name: 'assets/[name].[hash:8].[ext]',
    },
  });
  config.loader('url-loader', {
    query: {
      name: 'assets/[name].[hash:8].[ext]',
    },
  });
};

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: '',
  },
  mapping: {
    'MarkdownRemark.frontmatter.author': 'AuthorsJson',
  },
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 590,
            },
          },
          {
            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-tagmanager',
      options: {
        id: '',
      },
    },
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-plugin-typography',
      options: {
        pathToConfigModule: 'src/utils/typography',
      },
    },
    'gatsby-transformer-csv',
    'gatsby-plugin-favicon',
    'gatsby-transformer-json',
  ],
};

I am running node v8.7.0 on MacOS X High Sierra. Any ideas?

[KyleAMathews]

Yeah… short answer is we aren't able to make JavaScript actually cachable with webpack 1. I'm pretty sure this is fixable for the coming upgrade to webpack 3 but for now, don't cache JS just things in /static/.

Planning on writing a Gatsby caching docs page soon.

[markcatley]

Thanks for that. Nice to know I am not going insane.