Gatsby build failing on netlify

[anthkris]

Summary

I'm new to gatsby and react but I've got my site prototype up and running locally. But when I try to deploy to netlify it keeps failing.

I've looked at previous issues which seemed to get around this by upgrading various plugins (#4996, #4990, #4989) but as far as I can tell, everything is updated.

I'm not sure what I'm messing up.

The final error is:

success Building CSS — 7.829 s
10:44:50 PM: success Building production JavaScript bundles — 988.919 s
10:44:50 PM: error Building static HTML for pages failed
10:44:50 PM: See our docs page on debugging HTML builds for help https://goo.gl/yL9lND
10:44:50 PM:   11 | const CategoriesPage = ({
10:44:50 PM:   12 |   data: {
10:44:50 PM: > 13 |     allMarkdownRemark: { group },
10:44:50 PM:      |     ^
10:44:50 PM:   14 |     site: {
10:44:50 PM:   15 |       siteMetadata: { title },
10:44:50 PM:   16 |     },
10:44:50 PM: 
10:44:50 PM:   WebpackError: Cannot read property 'allMarkdownRemark' of undefined

And before that there are lots of these errors:

The new node didn't pass validation
10:44:48 PM: ValidationError: child "internal" fails because ["description" is not allowed]

Relevant information

Environment (if relevant)

System:
OS: macOS High Sierra 10.13.4
CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.6.1 - /usr/local/bin/node
npm: 3.10.7 - ~/.nvm/versions/node/v6.6.0/bin/npm
Browsers:
Chrome: 67.0.3396.87
Firefox: 60.0.2
Safari: 11.1
npmPackages:
gatsby: ^1.9.153 => 1.9.270
gatsby-image: ^1.0.54 => 1.0.54
gatsby-link: ^1.6.34 => 1.6.44
gatsby-paginate: ^1.0.16 => 1.0.16
gatsby-plugin-catch-links: ^1.0.24 => 1.0.24
gatsby-plugin-lodash: ^1.0.11 => 1.0.11
gatsby-plugin-netlify: ^1.0.21 => 1.0.21
gatsby-plugin-offline: ^1.0.18 => 1.0.18
gatsby-plugin-react-helmet: ^2.0.3 => 2.0.11
gatsby-plugin-react-next: ^1.0.11 => 1.0.11
gatsby-plugin-sass: ^1.0.26 => 1.0.26
gatsby-plugin-sharp: ^1.6.48 => 1.6.48
gatsby-plugin-typography: ^1.7.19 => 1.7.19
gatsby-remark-copy-linked-files: ^1.5.37 => 1.5.37
gatsby-remark-embed-video: ^1.4.0 => 1.4.0
gatsby-remark-images: ^1.5.67 => 1.5.67
gatsby-remark-katex: ^1.0.14 => 1.0.14
gatsby-remark-prismjs: ^2.0.4 => 2.0.4
gatsby-remark-responsive-iframe: ^1.4.20 => 1.4.20
gatsby-remark-responsive-image: ^1.0.0-alpha13-alpha.435e0178 => 1.0.0-alpha13-alpha.435e0178
gatsby-remark-smartypants: ^1.4.12 => 1.4.12
gatsby-source-filesystem: ^1.5.39 => 1.5.39
gatsby-transformer-remark: ^1.7.44 => 1.7.44
gatsby-transformer-sharp: ^1.6.27 => 1.6.27
npmGlobalPackages:
gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'K. Anthony: LX Designer',
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages/posts`,
        name: 'posts',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `img`,
        path: `${__dirname}/public/images`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `post-images`,
        path: `${__dirname}/public/images/post-images`
      }
    },
    {
      resolve: 'gatsby-transformer-remark',
        options: {
          plugins: [
            {
              resolve: 'gatsby-remark-images',
              options: {
                maxWidth: 810,
                quality: 90,
                linkImagesToOriginal: false,
              },
            },
            {
              resolve: `gatsby-remark-responsive-image`,
              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: 810,
              },
            },
            {
              resolve: "gatsby-remark-smartypants",
              options: {
                dashes: "oldschool",
              },
            },
            {
              resolve: "gatsby-remark-embed-video",
              options: {
                width: 800,
                ratio: 1.77, // Optional: Defaults to 16/9 = 1.77
                related: false, //Optional: Will remove related videos from the end of an embedded YouTube video.
                noIframeBorder: true //Optional: Disable insertion of <style> border: 0
              }
            },
            `gatsby-remark-responsive-iframe`,
            `gatsby-remark-katex`,
            `gatsby-remark-copy-linked-files`,
          ],
        },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-catch-links`,
    `gatsby-plugin-react-next`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-netlify`
  ],
};

package.json:

{
  "name": "gatsby-knanthony-portfolio",
  "version": "1.0.0",
  "author": "Kristin Anthony <kristin@knanthony.com>",
  "dependencies": {
    "gatsby": "^1.9.153",
    "gatsby-image": "^1.0.54",
    "gatsby-link": "^1.6.34",
    "gatsby-paginate": "^1.0.16",
    "gatsby-plugin-catch-links": "^1.0.24",
    "gatsby-plugin-lodash": "^1.0.11",
    "gatsby-plugin-netlify": "^1.0.21",
    "gatsby-plugin-offline": "^1.0.18",
    "gatsby-plugin-react-helmet": "^2.0.3",
    "gatsby-plugin-react-next": "^1.0.11",
    "gatsby-plugin-sass": "^1.0.26",
    "gatsby-plugin-sharp": "^1.6.48",
    "gatsby-plugin-typography": "^1.7.19",
    "gatsby-remark-copy-linked-files": "^1.5.37",
    "gatsby-remark-embed-video": "^1.4.0",
    "gatsby-remark-images": "^1.5.67",
    "gatsby-remark-katex": "^1.0.14",
    "gatsby-remark-prismjs": "^2.0.4",
    "gatsby-remark-responsive-iframe": "^1.4.20",
    "gatsby-remark-responsive-image": "^1.0.0-alpha13-alpha.435e0178",
    "gatsby-remark-smartypants": "^1.4.12",
    "gatsby-source-filesystem": "^1.5.39",
    "gatsby-transformer-remark": "^1.7.44",
    "gatsby-transformer-sharp": "^1.6.27",
    "prismjs": "^1.15.0",
    "react-helmet": "^5.2.0",
    "typography-theme-elk-glen": "^0.16.9",
    "typography-theme-grand-view": "^0.15.10"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/anthkris/portfolio-site.git"
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.10.2",
    "wpxml2md": "^1.1.3"
  }
}

gatsby-node.js:

const path = require('path');
const _ = require('lodash');
const createPaginatedPages = require("gatsby-paginate");

exports.createPages = ({ boundActionCreators, graphql }) => {
  const { createPage } = boundActionCreators;
  const pageSize = 12;
  const blogIndexTemplate = path.resolve(`src/templates/Blog.js`);
  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
  const tagTemplate = path.resolve(`src/templates/tags.js`);
  const categoryTemplate = path.resolve(`src/templates/categories.js`);

  return graphql(`{
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            excerpt(pruneLength: 100)
            html
            id
            frontmatter {
              date
              path
              title
              tags
              categories
            }
          }
        }
      }
    }`)
    .then(result => {
      const posts = result.data.allMarkdownRemark.edges;
      // createPaginatedPages({
      //   edges: posts,
      //   createPage: createPage,
      //   pageTemplate: "src/templates/Blog.js",
      //   pageLength: 12, // This is optional and defaults to 10 if not used
      //   pathPrefix: "blog", // This is optional and defaults to an empty string if not used
      //   context:
      //     {
      //       pageSize: pageSize,
      //     },
      //   buildPath: (index, pathPrefix) => index > 1 ? `${pathPrefix}/${index}` : `/${pathPrefix}` // This is optional and this is the default
      // });

      if (result.errors) {
        return Promise.reject(result.errors);
      }

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

      // pagination
      const chunkedPosts = _.chunk(posts, pageSize);
      _.each(chunkedPosts, (chunk, index) => {
        let path = "/blog";
        if(index > 0) {
          path = `/blog/${index+1}/`
        }
        createPage({
          path: path,
          component: blogIndexTemplate,
          context:
            {
              pageSize: pageSize,
              pageSkip: index*pageSize,
              pagesTotal: Math.ceil(posts.length / pageSize),
              currentPage: index+1
            },
        })
      })

      // Tag pages:
      let tags = [];
      // Iterate through each post, putting all found tags into `tags`
      _.each(posts, edge => {
        if (_.get(edge, "node.frontmatter.tags")) {
          tags = tags.concat(edge.node.frontmatter.tags);
        }
      });
      // Eliminate duplicate tags
      tags = _.uniq(tags);

      // Make tag pages
      tags.forEach(tag => {
        createPage({
          path: `/tags/${_.kebabCase(tag)}/`,
          component: tagTemplate,
          context: {
            tag,
          },
        });
      });

      // Tag pages:
      let categories = [];
      // Iterate through each post, putting all found tags into `categories`
      _.each(posts, edge => {
        if (_.get(edge, "node.frontmatter.categories")) {
          categories = categories.concat(edge.node.frontmatter.categories);
        }
      });
      // Eliminate duplicate tags
      categories = _.uniq(categories);

      // Make category pages
      categories.forEach(category => {
        createPage({
          path: `/categories/${_.kebabCase(category)}/`,
          component: categoryTemplate,
          context: {
            category,
          },
        });
      });

    });
}

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

[krichdev]

In your gatsby-node file, have you tried returning a promise with the graphql query?
Something like:
return new Promise((resolve, reject) => { //query }).then(result => { //loop through result })

[anthkris]

@krichdev I think I fixed this by upgrading specifically to the latest package in package.json. Now I'm having a different netfily error where it is saying that the build is timing out. Do you think what you suggest would help with that?

[krichdev]

I think it might. The .then() call needs a resolved Promise.

Here is the gatsby blog example node file:
https://github.com/gatsbyjs/gatsby/blob/master/examples/using-remark/gatsby-node.js

[m-allanson]

Also do you see the same errors when you run gatsby build on your local machine?

[anthkris]

Hey @m-allanson I updated the gatsby node and pushed again and still has the build fail errors. Perhaps its something to do with the amount of images I have for my posts? I don't show any errors when I run gatsby-build locally.

[KyleAMathews]

How long does the build take locally?

[anthkris]

@KyleAMathews gatsby develop, when starting from scratch does take some time, though I haven't measured it. 15 minutes or so may be right. I think I read in another issue that the work around was to upload the build files instead of trying to build from github?

[KyleAMathews]

Yeah, it sounds like you're hitting the Netlify build limit. Image processing does take a really long time is probably what's causing the trouble. The easiest way to get around the timeout issue is yeah, to build locally and push new updates to Netlify.

[anthkris]

Thanks @KyleAMathews!