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

[brimarq]

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(R) Core(TM) 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

[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.

[AishaBlake]

Closing this since the tutorial does work as written and it doesn't seem like we need to make a change to Gatsby itself. Thanks for bringing it up! We should be checking that tutorial regularly anyway and I spotted a couple of small, unrelated things for us to fix!

[brimarq]

Ok... this is strange. I noticed in VS Code that the file src/pages/sweet-pandas-eating-sweets.md apparently wasn't being recognized as a markdown file (generic file icon). I removed the .md extension, added it back, stopped the server, ran gatsby clean then gatsby develop, and now it works. I left the test case repo untouched if anyone wants to look at that file and see what could have caused this. I have no idea.

[brimarq]

@AishaBlake Ahh... just saw your comment after I posted. Good to know I'm not losing my mind - just my typing dexterity, apparently. LOL
Thanks for catching that.

[djpowers]

@brimarq, I just came across your issue after encountering the same exact problem myself (thanks for reporting it!), and was curious if you were using Mozilla Firefox when you copied the text.

I'm asking because I think I found a bug in Firefox related to copying text via click and drag. The selection shows up normally, but when you copy it includes a trailing space not indicated in the visual selection.

It seems like a pretty extreme edge case so it may not get picked up, but if you or others are seeing the same thing and feel like weighing in to verify, that may help get it fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1625057

[brimarq]

@djpowers Interesting... FF _is_ my default browser, but I use Chrome for development and usually have them both open while working. That said, I'm pretty sure I must have made a fluke typo in VS Code when I created the file. Lesson learned... now I know what to look for. It's probably also a hint that I need to take more frequent breaks. LOL

[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`,
  },
},

[747-diego]

lol Guys it was the space at the end of "sweet-pandas-eating-sweets.md "
I had the SAME EXACT issue for two days and finally came upon this resource.

I erased the space at the end of my file and instantly everything worked.
Read through the comments and @AishaBlake had it right the first time.

Thanks Aisha !

First comment on this list.
https://github.com/gatsbyjs/gatsby/issues/22192#issuecomment-597988097