gatsby-plugin-remark throws errors

[charlesvdv]

Hi!

I've been trying Gatsby for my new static website/blog and I can't make the remark plugin working 😞
I've tried to compile the using-remark example but it seems broken. Here is the output of the generation with the lastest gatsby version available on npm:
(the first build loop infinitily at run graphql queries and after and relaunching, it gives me this error).

➜ npm run build

> [email protected] build /tmp/gatsby/examples/using-remark
> gatsby build

success open and validate gatsby-config.js — 0.004 s
success copy gatsby files — 0.035 s
success source and transform nodes — 0.137 s
success building schema — 0.181 s
success createPages — 0.040 s
success createPagesStatefully — 0.019 s
success extract queries from components — 0.107 s
success run graphql queries — 0.036 s
success write out page data — 0.003 s
success update schema — 0.127 s

bootstrap finished, time since started: 1.941 s

Generating CSS
Compiling production bundle.js
Generating static HTML for pages

Error: TypeError: Cannot read property 'markdownRemark' of undefined
    at BlogPostRoute.render (render-page.js:43632:34)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (render-page.js:15605:31)
    at ReactCompositeComponentWrapper._renderValidatedComponent (render-page.js:15628:33)
    at ReactCompositeComponentWrapper.performInitialMount (render-page.js:15168:31)
    at ReactCompositeComponentWrapper.mountComponent (render-page.js:15064:22)
    at Object.mountComponent (render-page.js:7976:36)
    at ReactCompositeComponentWrapper.performInitialMount (render-page.js:15177:35)
    at ReactCompositeComponentWrapper.mountComponent (render-page.js:15064:22)
    at Object.mountComponent (render-page.js:7976:36)
    at ReactDOMComponent.mountChildren (render-page.js:14205:45)

Generating static HTML for pages failed
See our docs page on debugging HTML builds for help https://goo.gl/yL9lND
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/charles/.npm/_logs/2017-07-16T13_55_50_869Z-debug.log

When I'm trying to build my static blog, I got this error:
(soure can be found here but I've basically copy-pasted all the info from the example).

➜ npm run develop

> [email protected] develop /home/charles/Dev/charlesvdv.github.io
> gatsby develop

success open and validate gatsby-config.js — 0.004 s
success copy gatsby files — 0.027 s
success source and transform nodes — 0.059 s
success building schema — 0.137 s
⠁ [ { GraphQLError: Cannot query field "fields" on type "MarkdownRemark".
      at Object.Field (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:66:31)
      at Object.enter (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/language/visitor.js:297:29)
      at Object.enter (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/language/visitor.js:339:25)
      at visit (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/language/visitor.js:229:26)
      at visitUsingRules (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/validation/validate.js:76:22)
      at validate (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/validation/validate.js:61:10)
      at /home/charles/Dev/charlesvdv.github.io/node_modules/graphql/graphql.js:72:51
      at Promise._execute (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/debuggability.js:300:9)
      at Promise._resolveFromExecutor (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:483:18)
      at new Promise (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:79:10)
      at graphqlImpl (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/graphql.js:62:10)
      at graphql (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/graphql.js:50:148)
      at graphqlRunner (/home/charles/Dev/charlesvdv.github.io/node_modules/gatsby/dist/bootstrap/index.js:333:22)
      at Promise (/home/charles/Dev/charlesvdv.github.io/gatsby-node.js:14:5)
      at Promise._execute (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/debuggability.js:300:9)
      at Promise._resolveFromExecutor (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:483:18)
    message: 'Cannot query field "fields" on type "MarkdownRemark".',
    locations: [ [Object] ],
    path: undefined },
  { GraphQLError: Cannot query field "tags" on type "frontmatter".
      at Object.Field (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:66:31)
      at Object.enter (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/language/visitor.js:297:29)
      at Object.enter (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/language/visitor.js:339:25)
      at visit (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/language/visitor.js:229:26)
      at visitUsingRules (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/validation/validate.js:76:22)
      at validate (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/validation/validate.js:61:10)
      at /home/charles/Dev/charlesvdv.github.io/node_modules/graphql/graphql.js:72:51
      at Promise._execute (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/debuggability.js:300:9)
      at Promise._resolveFromExecutor (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:483:18)
      at new Promise (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:79:10)
      at graphqlImpl (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/graphql.js:62:10)
      at graphql (/home/charles/Dev/charlesvdv.github.io/node_modules/graphql/graphql.js:50:148)
      at graphqlRunner (/home/charles/Dev/charlesvdv.github.io/node_modules/gatsby/dist/bootstrap/index.js:333:22)
      at Promise (/home/charles/Dev/charlesvdv.github.io/gatsby-node.js:14:5)
      at Promise._execute (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/debuggability.js:300:9)
      at Promise._resolveFromExecutor (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:483:18)
    message: 'Cannot query field "tags" on type "frontmatter".',
    locations: [ [Object] ],
    path: undefined } ]
UNHANDLED REJECTION TypeError: Cannot read property 'allMarkdownRemark' of undefined
    at graphql.then.result (/home/charles/Dev/charlesvdv.github.io/gatsby-node.js:42:25)
    at tryCatcher (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromiseCtx (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:606:10)
    at Async._drainQueue (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/async.js:138:12)
    at Async._drainQueues (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:800:20)
    at tryOnImmediate (timers.js:762:5)
    at processImmediate [as _immediateCallback] (timers.js:733:5)
success createPages — 0.019 s
⠁ /home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/async.js:61
        fn = function () { throw arg; };
                           ^

TypeError: Cannot read property 'allMarkdownRemark' of undefined
    at graphql.then.result (/home/charles/Dev/charlesvdv.github.io/gatsby-node.js:42:25)
    at tryCatcher (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromiseCtx (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/promise.js:606:10)
    at Async._drainQueue (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/async.js:138:12)
    at Async._drainQueues (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/home/charles/Dev/charlesvdv.github.io/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:800:20)
    at tryOnImmediate (timers.js:762:5)
    at processImmediate [as _immediateCallback] (timers.js:733:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/charles/.npm/_logs/2017-07-16T19_51_55_705Z-debug.log

Sorry for the long error log :/

And thanks a lot for gatsby it looks amazing!

[jbolda]

It looks like you have some of the code in Gatsby-node.js commented out as compared to the example: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-remark/gatsby-node.js#L42

That snippet adds those fields to the node, and the error you are seeing is that it is missing those fields.

[saschajullmann]

I can confirm that the "using-remark" example does not work. I've been trying to get a simple blog to work with no luck. When I tried out the example and ran "gatsby develop" it gets stuck on "run graphql queries". Additionally I got some "unhandled rejections"

vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution ⠂ run graphql queriesvips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution ⡀ run graphql queriesvips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution vips warning: VipsJpeg: error reading resolution Generating image thumbnails [=====-------------------------] 8/50 0.5 secs 16%UNHANDLED REJECTION TypeError: Cannot read property 'parent' of undefined at Function.exports.update (/home/kidman/using-remark/node_modules/gatsby-remark-images/node_modules/cheerio/lib/parse.js:69:25) at module.exports (/home/kidman/using-remark/node_modules/gatsby-remark-images/node_modules/cheerio/lib/parse.js:19:11) at Function.exports.load (/home/kidman/using-remark/node_modules/gatsby-remark-images/node_modules/cheerio/lib/static.js:27:14) at _callee3$ (/home/kidman/using-remark/node_modules/gatsby-remark-images/index.js:196:33) at tryCatch (/home/kidman/using-remark/node_modules/regenerator-runtime/runtime.js:65:40) at Generator.invoke [as _invoke] (/home/kidman/using-remark/node_modules/regenerator-runtime/runtime.js:303:22) at Generator.prototype.(anonymous function) [as next] (/home/kidman/using-remark/node_modules/regenerator-runtime/runtime.js:117:21) at step (/home/kidman/using-remark/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30) at /home/kidman/using-remark/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14 at new Promise (/home/kidman/using-remark/node_modules/core-js/library/modules/es6.promise.js:191:7) at /home/kidman/using-remark/node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12 at /home/kidman/using-remark/node_modules/gatsby-remark-images/index.js:308:26 at Promise._execute (/home/kidman/using-remark/node_modules/bluebird/js/release/debuggability.js:300:9) at Promise._resolveFromExecutor (/home/kidman/using-remark/node_modules/bluebird/js/release/promise.js:483:18) at new Promise (/home/kidman/using-remark/node_modules/bluebird/js/release/promise.js:79:10) at /home/kidman/using-remark/node_modules/gatsby-remark-images/index.js:188:16 UNHANDLED REJECTION TypeError: Cannot read property 'parent' of undefined at Function.exports.update (/home/kidman/using-remark/node_modules/gatsby-remark-images/node_modules/cheerio/lib/parse.js:69:25) at module.exports (/home/kidman/using-remark/node_modules/gatsby-remark-images/node_modules/cheerio/lib/parse.js:19:11) at Function.exports.load (/home/kidman/using-remark/node_modules/gatsby-remark-images/node_modules/cheerio/lib/static.js:27:14) at _callee3$ (/home/kidman/using-remark/node_modules/gatsby-remark-images/index.js:196:33) at tryCatch (/home/kidman/using-remark/node_modules/regenerator-runtime/runtime.js:65:40) at Generator.invoke [as _invoke] (/home/kidman/using-remark/node_modules/regenerator-runtime/runtime.js:303:22) at Generator.prototype.(anonymous function) [as next] (/home/kidman/using-remark/node_modules/regenerator-runtime/runtime.js:117:21) at step (/home/kidman/using-remark/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30) at /home/kidman/using-remark/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14 at new Promise (/home/kidman/using-remark/node_modules/core-js/library/modules/es6.promise.js:191:7) at /home/kidman/using-remark/node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12 at /home/kidman/using-remark/node_modules/gatsby-remark-images/index.js:308:26 at Promise._execute (/home/kidman/using-remark/node_modules/bluebird/js/release/debuggability.js:300:9) at Promise._resolveFromExecutor (/home/kidman/using-remark/node_modules/bluebird/js/release/promise.js:483:18) at new Promise (/home/kidman/using-remark/node_modules/bluebird/js/release/promise.js:79:10) at /home/kidman/using-remark/node_modules/gatsby-remark-images/index.js:188:16 Generating image thumbnails [==============================] 50/50 6.0 secs 100% ⠈ run graphql queries

After that, nothing will happen.
I would really appreciate any pointers on how to use gatsby-transformer-remark together with gatsby-source-filesystem :).

[jbolda]

@saschajullmann I think that is unrelated to the OP issue. Are you using the example exactly as is? That seems to be an issue with gatsby-remark-images. Can you confirm which version of that you have? Also try deleting node modules and reinstalling. npm has had issues in the last releases for some reason. (Everything and to work fine with yarn.)

[saschajullmann]

@jbolda Ok, sorry... I was looking for a possible explanation, came across this and thought it might help^^.
The version of "gatsby-remark-images" that got installed was "1.2.0". You're right, that this was a problem and removing this plugin from the gatsby-config let me at least use the "using-remark" example (minus responsive images). Thanks :+1:

[jbolda]

@saschajullmann no worries. Are you able to tell why it is erroring out? With all the noise from npm issues, it's hard to tell if it's an install issue or a bug!

[saschajullmann]

@jbolda I'm not entirely sure tbh. I dug a little deeper and as it turns out: gatsby-remark-responsive-iframe seems to be the culprit. At least when I only comment out the part involving this in the gatsby-config I get no errors starting the development server and it seems to work fine. I noticed that gatsby-remark-responsive-iframe has "cheerio 0.22" as a dependency while gatsby-remark-image has "cheerio 1.00-RC1" as a dependency. Not sure whether this has something to do with it. That's all i got for now :/

[charlesvdv]

I finally managed to get the remark plugin working!

I just need to copy-paste the onCreateNode from using-remark example. Sorry for that but maybe we should open a new issue about the using-remark which is broken because I had the same issue as @saschajullmann ?

I've tried to compile the using-remark example but it seems broken. Here is the output of the generation with the lastest gatsby version available on npm:
(the first build loop infinitily at run graphql queries and after and relaunching, it gives me this error).

Thanks @jbolda for the help!

[jbolda]

@charlesvdv @saschajullmann would you be able to try installing using yarn? I'm going to close this, but open up a new (more specific image) issue if the error is the same so we can track down the problem. Thanks.

[KyleAMathews]

So yes, there is an error in using-remark. It got broke on a recent PR but because Netlify wasn't messaging us for that the bug wasn't caught before being deployed.

This PR should fix the bug (though not perhaps the original bug for this issue) https://github.com/gatsbyjs/gatsby/pull/1543

[KyleAMathews]

Sorry about the breakage. Will be revamping how we track example sites soon so regressions like this are caught in PRs not after.