Gatsby: Parsing Markdown files seems to randomly cause compilation error

[bonbonio]

Hello,

I am using this boilerplate which is linked to from the Gatsby site; https://github.com/Vagr9K/gatsby-material-starter and when it compiles, sometimes I get this error, and then it wont seem to clear;

GraphQL Error There was an error while compiling your site's GraphQL queries.
  Invariant Violation: GraphQLParser: Unknown field `nextTitle` on type `fields_2`. Source: document `BlogPostBySlug` file: `GraphQL request`.

I have tried using no markdown files, to see if it just loads the templates (it wont), putting the sample pages bundled with it back and also making new markdown files; it just seems to be a compiliation error or someone with the npm packages?

Can anyone offer any pointers? Is this a known issue - I want to use gatsby to replace a jeyll site is all.

I also raised an issue on the boilerplate; and it can be found here; https://github.com/Vagr9K/gatsby-material-starter/issues/26

[pieh]

Gatsby needs to create data types schema to be able use graphql data layer. Currently gatsby guesses types of fields based on data it has (you don't define anywhere what type of data given field is). Gatsby will fail to set field type if:

• there is no data of given field (so nextTitle field is never set)
• there are conflicting types of data (f.e. one post will have nextTitle as String and other will have f.e. number)

If gatsby fails to set type on field then querying this field will produce error you are seeing.

[MaralS]

@bonbonio I have the same problem when I try to compile.
Sometimes childImageSharpis null, one time markdownRemark is undefined or this time allSitePage is undefined.
I'm struggling with this kind of issues for weeks now.

I'm trying to implement NetlifyCMS on my Gatsby project

@KyleAMathews do you have any idea ?

[bonbonio]

Yes, I have pinned it down to the markdown compilation, it seems to randomly break during a compilation and then cannot proceed when the process restarts.

I think clearer documentation for the markdown structure needed would help too.

[bonbonio]

@MaralS try to delete the ./cache folder after fixing the markdown on the files - that worked for me.

It looks like some sort of terminal errors get cached and the cache is not cleared when npm run develop is re-run.

The cache should be cleared on everyone run of develop, or else it defeats the purpose of the mode.

[MaralS]

@bonbonio I already tried to delete the ./cache folder by doingrm -R .cache && yarn build && yarn serve
I still have the same error.

Console

rm -R .cache && yarn build && yarn serve
yarn run v1.3.2
$ gatsby build
success delete html files from previous builds — 0.067 s
success open and validate gatsby-config.js — 0.006 s
success copy gatsby files — 0.024 s
success onPreBootstrap — 0.010 s
success source and transform nodes — 0.136 s
success building schema — 0.296 s
success createLayouts — 0.011 s
success createPages — 0.069 s
success createPagesStatefully — 0.038 s
success onPreExtractQueries — 0.022 s
success update schema — 0.178 s
GraphQL Error There was an error while compiling your site's GraphQL queries.
  Invariant Violation: GraphQLParser: Unknown argument `formatString`. Source: document `IndexQuery` file: `GraphQL request`.

success extract queries from components — 0.158 s
success run graphql queries — 0.017 s
success write out page data — 0.003 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 3.716 s

success Building CSS — 5.665 s
success Building production JavaScript bundles — 16.826 s

error Building static HTML for pages failed

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

  35 | }) {
  36 |   const hostname = 'www.autocontrole-hexagones.fr';
> 37 |   const { markdownRemark: post } = data;
     |           ^
  38 |   const shareUrl = 'https://'+hostname+location.pathname;
  39 |   const title = post.frontmatter.title;
  40 |   const bodyMail = 'Bonjour, voici un article très intéressant. Tu peux le consulter à l\'adresse suivante : '+shareUrl;


  WebpackError: Cannot read property 'markdownRemark' of undefined

  - blog-post.js:37 Template
    src/templates/blog-post.js:37:11

  - ReactCompositeComponent.js:306 ReactCompositeComponentWrapper._const    ructComponentWithoutOwner
    ~/react-dom/lib/ReactCompositeComponent.js:306:1

  - ReactCompositeComponent.js:282 ReactCompositeComponentWrapper._const    ructComponent
    ~/react-dom/lib/ReactCompositeComponent.js:282:1

  - ReactCompositeComponent.js:185 ReactCompositeComponentWrapper.mountC    omponent
    ~/react-dom/lib/ReactCompositeComponent.js:185:1

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

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

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

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

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

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


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[calcsam]

@MaralS @bonbonio you are posting different error messages. Could you post repos demonstrating the bug?

[bonbonio]

My issue was resolved by clearing the cache, looks like its related to OS X and its file system not showing changes to the watcher that does the recompilation.

[MaralS]

@calcsam I'll try to simulate this error in a separate repo. I had to delete my branch because it cause such a mess in my project. It drives me crazy lol

[MaralS]

@calcsam I created a repo with demontrate the problem.
I simply deployed Netlify CMS with Gatsby (just the boilerplate) and made some modifications and added new articles. I still have the same error.

Netlify deploy console :

  20 |   render() {
12:05:06 PM:   21 |     const { data } = this.props;
12:05:06 PM: > 22 |     const { edges: posts } = data.allMarkdownRemark;
12:05:06 PM:      |                                   ^
12:05:06 PM:   23 |
12:05:06 PM:   24 |     return (
12:05:06 PM:   25 |       <section className="section">
12:05:06 PM: 
12:05:06 PM:   WebpackError: Cannot read property 'allMarkdownRemark' of undefined
12:05:06 PM:   
12:05:06 PM:   - index.js?d38a:22 IndexPage.render
12:05:06 PM:     src/pages/index.js?d38a:22:35
12:05:06 PM:   
12:05:06 PM:   - react-dom-server.node.production.min.js?62de:32 za
12:05:06 PM:     ~/react-dom/cjs/react-dom-server.node.production.min.js?62de:32:318
12:05:06 PM:   
12:05:07 PM:   - react-dom-server.node.production.min.js?62de:36 a.render
12:05:07 PM:     ~/react-dom/cjs/react-dom-server.node.production.min.js?62de:36:16
12:05:07 PM:   
12:05:07 PM:   - react-dom-server.node.production.min.js?62de:35 a.read
12:05:07 PM:     ~/react-dom/cjs/react-dom-server.node.production.min.js?62de:35:208
12:05:07 PM:   
12:05:07 PM:   - react-dom-server.node.production.min.js?62de:44 renderToString
12:05:07 PM:     ~/react-dom/cjs/react-dom-server.node.production.min.js?62de:44:1
12:05:07 PM:   
12:05:07 PM:   - static-entry.js?8f8a:126 module.exports
12:05:07 PM:     .cache/static-entry.js?8f8a:126:31
12:05:07 PM:   
12:05:07 PM:   - static-entry.js?8f8a:99 Function.Promise.fromNode.Promise.fromCallback
12:05:07 PM:     .cache/static-entry.js?8f8a:99:20
12:05:07 PM:   
12:05:07 PM:   
12:05:07 PM:   

Link to the repository here

[m-allanson]

Hi @MaralS, I cloned your site and tried running gatsby develop but it gave me errors about missing fields:

GraphQLError: Cannot query field "image" on type "frontmatter".
GraphQLError: Cannot query field "heading" on type "frontmatter".
GraphQLError: Cannot query field "intro" on type "frontmatter".
GraphQLError: Cannot query field "main" on type "frontmatter".
GraphQLError: Cannot query field "testimonials" on type "frontmatter".
GraphQLError: Cannot query field "full_image" on type "frontmatter".
GraphQLError: Cannot query field "pricing" on type "frontmatter".

It looks like the /src/pages/product/ directory is missing?

[MaralS]

@m-allanson I tried to delete the product page with the administrator interface. I think it deleted the directory on the repo. I did not touch the code, just clone the repo and deployed on netlify in order to make some tests.

[reimertz]

I also see this issue. Anyone who'd find an solution? I've looked at the source but cannot figure out what the issue could be.

This is pretty problematic since I use Netlify CMS + Gatsby for CI which currently randomly breaks. 😞

[reimertz]

I found the issue for me. I had a noop.md file so that build wouldn't break when the /blog was empty and than filtered them out in gatsby-node.js so they wouldn't be included when building the site.

The problem was that noop.md didn't include a proper date attribute, so when it parsed all of the blog posts and noop.md was parsed first, the build seemed to fail.

[MaralS]

@reimertz Thank you, do you have a repo to test ?

[bonbonio]

The issue is not that the issue prevents a build, the issue is that the break is cached, so even after fixing the cache needs deleted before a build works.

Do a clean of the cache on a new build perhaps.

@MaralS

[reimertz]

I always clean on build / develop. :)

[MaralS]

Me too I always clean on build / develop

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!