Fixing Build Issue with Gatsby Lumen Theme

javascript

After the monumental effort which I went through to switch from Wordpress to Hexo, what on planet Earth am I looking at Gatsby for?!

Look, I have my reasons, but mainly it’s because I enjoy walking up steep hills and hunting for needles in fields of haystacks! That aside, whilst trying to get one theme going, I ran into a problem.

It started with this pretty example: gatsby-v2-starter-theme but after you follow the instructions to install it, you run straight into an error:

1
"gatsby-node.js" threw an error while running the onCreateNode lifecycle: Cannot read property 'slug' of undefined slug gatsby-starter-v2-lumen

Eek! If you take a look at that file (located in the root of the theme at line 106), you see what it is complaining about.

1
let slug = fileNode.fields.slug

At least as far as I could tell, that field just doesn’t exist so I did a little hunting around:

  • Examining the history of that file on GitHub
  • Seeing what the Gatsby docs had to say about that object (no mention of slug)

…and drew a blank. Admittedly, my experience with Gatsby is borderline zero right now, but here’s what I came up with to try and resolve it.

I took this code:

1
2
3
4
5
const fileNode = getNode(node.parent)
let slug = fileNode.fields.slug
if (typeof node.frontmatter.path !== 'undefined') {
    slug = node.frontmatter.path
}

and changed it to this:

1
2
3
4
5
6
let slug = 'unknown'
if (typeof node.frontmatter.slug !== 'undefined') {
    slug = node.frontmatter.slug
} else if (typeof node.frontmatter.path !== 'undefined') {
    slug = node.frontmatter.path
}

My intentions were that we would at least have a value for slug even if it couldn’t find anything better.

Next, if we could find a slug referenced in the MDX file, we would use that. By that I mean this part of your Markdown file:

1
2
3
4
5
6
---
title: Perfecting the Art of Perfection
date: "2016-09-01T23:46:37.121Z"
layout: post
draft: false
slug: "slug-me"

Should I arbitrarily be creating my own fields in the front matter (the bit above)? Erm. Not sure, haha, but why not?

And failing that, we’d take the path field:

1
path: "/posts/perfecting-the-art-of-perfection/"

Whatever you do, make sure you have a path, though - super required.

Anyway, re-run your build, and all should be well.

1
gatsby develop

Hi! Did you find this useful or interesting? I have an email list coming soon, but in the meantime, if you ready anything you fancy chatting about, I would love to hear from you. You can contact me here or at stephen ‘at’ logicalmoon.com