Gatsby: WebpackError: Cannot read property 'pathname' of undefined

[gdad-s-river]

Gatsby Version: 1.9.19
Node Version: 8.3.0
Mac OS Version:
System Version: macOS 10.12.6 (16G29) Kernel Version: Darwin 16.7.0

// gatsby-config.js

const path = require(`path`);

module.exports = {
  siteMetadata: {
    title: `Keep Their Smiles`,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-catch-links`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1280,
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
    `gatsby-plugin-glamor`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsbygram`,
        short_name: `Gatsbygram`,
        start_url: `/`,
        background_color: `#f7f7f7`,
        theme_color: `#191919`,
        display: `minimal-ui`,
      },
    },
    `gatsby-plugin-offline`,
    // {
    //  resolve: `gatsby-plugin-google-analytics`,
    //  options: {
    //      trackingId: `UA-91652198-1`,
    //  },
    // },
  ],
};

// gatsby-node.js

const { createFilePath } = require(`gatsby-source-filesystem`);
const path = require(`path`);

exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
  if (node.internal.type === `MarkdownRemark`) {
    const { createNodeField } = boundActionCreators;
    const slug = createFilePath({ node, getNode, basePath: `pages` });
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    });
  }
};

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;
  return new Promise((resolve, reject) => {
    graphql(`
      {
        allMarkdownRemark {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `).then(result => {
      result.data.allMarkdownRemark.edges.map(({ node }) => {
        if (node.fields.slug !== "/home/") {
          createPage({
            path: node.fields.slug,
            component: path.resolve(`./src/templates/page.js`),
            context: {
              // Data passed to context is available in page queries as GraphQL variables.
              slug: node.fields.slug,
            },
          });
        }
      });
      resolve();
    });
  });
};

// gatsby-browser.js
import { cssMediaQueries } from "./src/utils/mediaqueries.js";

let jsMediaQueries = {};

// not ideal, find some better way to do this.
exports.onRouteUpdate = function() {
  if (window) {
    // console.log(window);
    for (let breakpt in cssMediaQueries) {
      jsMediaQueries[breakpt] = window.matchMedia(
        cssMediaQueries[breakpt].match(/and(.*)/)[1],
      ).matches;
    }
  }
};

export { jsMediaQueries };

---

I'm using gatsby on a small project. The development server works fine without any issues, however gatsby build gives the following error

Full stack:

uccess Building CSS — 7.027 s
success Building production JavaScript bundles — 23.078 s
⠠ Building static HTML for pages-----------  {}  -----------
render landingpage  {}

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  20 |
  21 |     // NOTE: I could have used react helmet inside layout as well
> 22 |     if (this.props.location.pathname === "/") {
     |                             ^
  23 |       css.insert(`
  24 |         ${bwToColorStr}
  25 |         .gatsby-resp-image-image {


  WebpackError: Cannot read property 'pathname' of undefined

  - index.js:22 LandingPage.render
    src/pages/index.js:22:29

  - ReactCompositeComponent.js:798 ReactCompositeComponentWrapper._renderValid    atedComponentWithoutOwnerOrContext
    ~/react-dom/lib/ReactCompositeComponent.js:798:1

  - ReactCompositeComponent.js:821 ReactCompositeComponentWrapper._renderValid    atedComponent
    ~/react-dom/lib/ReactCompositeComponent.js:821:1

  - ReactCompositeComponent.js:361 ReactCompositeComponentWrapper.performIniti    alMount
    ~/react-dom/lib/ReactCompositeComponent.js:361:1

  - ReactCompositeComponent.js:257 ReactCompositeComponentWrapper.mountCompone    nt
    ~/react-dom/lib/ReactCompositeComponent.js:257:1

  - ReactReconciler.js:45 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:45:1

  - ReactMultiChild.js:236 ReactDOMComponent.mountChildren
    ~/react-dom/lib/ReactMultiChild.js:236:1

  - ReactDOMComponent.js:659 ReactDOMComponent._createContentMarkup
    ~/react-dom/lib/ReactDOMComponent.js:659:1

  - ReactDOMComponent.js:526 ReactDOMComponent.mountComponent
    ~/react-dom/lib/ReactDOMComponent.js:526:1

  - ReactReconciler.js:45 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:45:1

Repo and Branch to reproduce: https://github.com/motherteresa-welfaretrust/website/tree/bug/build-failure

[gdad-s-river]

This was a very silly doubt, I didn't properly investigate what was happening.

I had to pass the location prop from layouts/index.js so that all its children could access it and use it by doing

// layouts/index.js
 {this.props.children({
      location: { pathname: this.props.location.pathname },
  })}