[gatsby-source-contentful] Markdown editor image link formatting issue

[ChrisSki]

Gatsby: 1.8.11
Node: 8.9.1
OS: MacOS High Sierra

This is a strange bug and the errors in my terminal were not helpful at all. I finally found the issue to be the way links are used within Contentful's markdown editor. I received the error if links are formatted as normal Markdown links.

[This is a link](https://example.com)

But I did not get the error if links are reference style

[This is a link][1]
[1]: http://example.com

Error in console

success delete html files from previous builds — 0.014 s
success open and validate gatsby-config.js — 0.006 s
success copy gatsby files — 0.102 s
success onPreBootstrap — 0.010 s
⠁ Starting to fetch data from Contentful
Fetching default locale
⡀ source and transform nodesdefault local is : en-US
⠄ source and transform nodescontentTypes fetched 3
Updated entries  1
Deleted entries  0
Updated assets  0
Deleted assets  0
Fetch Contentful data: 631.129ms
success source and transform nodes — 0.673 s
success building schema — 0.485 s
success createLayouts — 0.031 s
success createPages — 0.175 s
success createPagesStatefully — 0.008 s
success onPreExtractQueries — 0.001 s
success update schema — 0.164 s
success extract queries from components — 0.112 s
error UNHANDLED REJECTION


  TypeError: Path must be a string. Received undefined

  - index.js:149
    [guru-blog]/[gatsby-remark-copy-linked-files]/index.js:149:32

  - index.js:25 one
    [guru-blog]/[unist-util-visit]/index.js:25:16

  - index.js:46 all
    [guru-blog]/[unist-util-visit]/index.js:46:20

  - index.js:29 one
    [guru-blog]/[unist-util-visit]/index.js:29:14

  - index.js:46 all
    [guru-blog]/[unist-util-visit]/index.js:46:20

  - index.js:29 one
    [guru-blog]/[unist-util-visit]/index.js:29:14

  - index.js:16 visit
    [guru-blog]/[unist-util-visit]/index.js:16:3

  - index.js:143 module.exports
    [guru-blog]/[gatsby-remark-copy-linked-files]/index.js:143:3

  - extend-node-type.js:142
    [guru-blog]/[gatsby-transformer-remark]/extend-node-type.js:142:32

  - Array.map

  - extend-node-type.js:139
    [guru-blog]/[gatsby-transformer-remark]/extend-node-type.js:139:55

  - util.js:16 tryCatcher
    [guru-blog]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [guru-blog]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [guru-blog]/[bluebird]/js/release/promise.js:569:18

  - promise.js:606 Promise._settlePromiseCtx
    [guru-blog]/[bluebird]/js/release/promise.js:606:10

  - async.js:138 Async._drainQueue
    [guru-blog]/[bluebird]/js/release/async.js:138:12

  - async.js:143 Async._drainQueues
    [guru-blog]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues
    [guru-blog]/[bluebird]/js/release/async.js:17:14

This was a little painful to figure out because I had to work through each of my 80 posts to find the cause...

[KyleAMathews]

Could you try adding a PR fixing this? It should be straightforward to add a test that reproduces the issue here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-copy-linked-files/src/__tests__/index.js

[ChrisSki]

Yup. I'll give it a go!

[ChrisSki]

So digging deeper, I'm noticing that this is specifically related to images. In this line of code, .dir is undefined.

var imagePath = path.posix.join(getNode(markdownNode.parent).dir, image.url);

I'm not sure where that's being assigned.

[KyleAMathews]

Ohhhh right — yeah, you shouldn't use gatsby-remark-copy-linked-files with anything other than gatsby-source-filesystem as that's what it assumes. It should fail more gracefully though so wrapping that code you found with an if (getNode(markdownNode.parent)) might fix things. Or you could just remove the plugin.

[ChrisSki]

You're right. That solved the issue. I removed it via yarn and from my gatsby-config.js

Thanks for sorting this out :)

[KyleAMathews]

Another successful Gatsby issue :-D

[ChrisSki]

@KyleAMathews do you think this plugin removal should be included in the gatsby-source-contenful docs?

[KyleAMathews]

yeah, that makes sense — warn that some gatsby-remark-* plugins don't work unless you have a filesystem. This one and gatsby-remark-images I believe.

Though we should really fix this one so it doesn't blow up on other markdown sources. There are times you might want to have local markdown along with markdown from Contentful (or some other non-filesystem source)

[ChrisSki]

That's probably true. I just don't know my way around gatsby enough to fine tune this :(

For example, you stated above that we should check if getNode(markdownNode.parent) exists, which it does in my case at line 149, but getNode(markdownNode.parent).dir doesn't. And I don't really know why without digging through all the source code.

[KyleAMathews]

We need to do something like we do here:

gatsby/packages/gatsby-remark-images/src/index.js

Line 39 in 4bc96cf

// Check if this markdownNode has a File parent. This plugin

[ChrisSki]

Ok. I'll work on this and submit a PR.