Tutorial Part Six Error: Cannot query field "frontmatter" on type "MarkdownRemark"

Description

Following this step in Gatsby’s official tutorial triggers this error:

Generating development JavaScript bundle failed
src/pages/index.js
52:11  error  Cannot query field "frontmatter" on type "MarkdownRemark"  graphql/template-strings

GraphiQL shows no frontmatter field.

Steps to reproduce

1. Clone this test case repo
2. Run npm install
3. Run gatsby develop

OR see on CodeSandbox

Expected result

Project should build and display the index.js page.

Actual result

Build fails.

Environment

System: OS: macOS High Sierra 10.13.6 CPU: (4) x64 Intel® Core™ i5-2500S CPU @ 2.70GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node Yarn: 1.22.4 - ~/.nvm/versions/node/v12.16.1/bin/yarn npm: 6.14.2 - ~/.nvm/versions/node/v12.16.1/bin/npm Languages: Python: 2.7.17 - /usr/local/bin/python Browsers: Chrome: 80.0.3987.132 Firefox: 73.0.1 Safari: 13.0.5 npmPackages: gatsby: ^2.19.7 => 2.19.7 gatsby-plugin-emotion: ^4.1.24 => 4.1.24 gatsby-plugin-typography: ^2.3.24 => 2.3.24 gatsby-source-filesystem: ^2.1.53 => 2.1.53 gatsby-transformer-remark: ^2.6.58 => 2.6.58 npmGlobalPackages: gatsby-cli: 2.10.4

[hedleysmith]

For anyone else who encounters this error and ends up here. Another common issue is that you need to add another source filesystem in gatsby-config.js:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pages`,
    path: `${__dirname}/src/pages`,
  },
},

[AishaBlake]

@brimarq you have a space at the end of your Markdown file’s name (sweet-pandas-eating-sweets.md ), so that file is being read as plaintext. Getting rid of the space fixes the issue.

It does seem like the error could be clearer but I’m not sure how we could catch something like that proactively.