Gatsby + NetlifyCMS image src not correct and srcset not being used

[JoshLong23]

Description

After gatsby develop and build, the src attribute of images in markdown files(coming from NetlifyCMS) tries to look at where the image has been saved in the repo - ../../../static/assets/image.jpg

This occurred after updating a number of packages:
"gatsby": "^2.1.31",
"gatsby-plugin-netlify": "^2.0.12",
"gatsby-plugin-netlify-cms": "^3.0.14",
"gatsby-plugin-sharp": "^2.0.28",
"gatsby-source-filesystem": "^2.0.24",
"gatsby-transformer-remark": "^2.3.2",
"gatsby-transformer-sharp": "^2.1.17",
"netlify-cms": "^2.6.1",

However, reverting the the previous versions did not resolve my issue.

The commit before updating to these packages works as expected, nothing else changed in between.

As of before updating packages when everything was working, images loaded as expected with all of the srcset attributes etc for responsive images.

Annoyingly, all of the different size versions of each image are being correctly created inside the public/static folder, but for reasons unknown to me these files are not being used at all!

Steps to reproduce

The repo is at https://github.com/JoshLong23/barebones-NetlifyCMS and can be found live at https://faithful-waffle-a4ff4a.netlify.com

Expected result

As above, images should load with the correct src path looking at the public/assets folder and with the correct srcset attributes.

Environment

System:
OS: Windows 7
CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v2 @ 3.50GHz
Binaries:
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
npmPackages:
gatsby: ^2.1.31 => 2.1.32
gatsby-plugin-netlify: ^2.0.12 => 2.0.12
gatsby-plugin-netlify-cms: ^3.0.14 => 3.0.14
gatsby-plugin-sharp: ^2.0.28 => 2.0.28
gatsby-remark-copy-linked-files: ^2.0.10 => 2.0.10
gatsby-remark-images: ^3.0.9 => 3.0.9
gatsby-remark-relative-images: ^0.2.2 => 0.2.2
gatsby-source-filesystem: ^2.0.24 => 2.0.25
gatsby-transformer-remark: ^2.3.2 => 2.3.3
gatsby-transformer-sharp: ^2.1.17 => 2.1.17

I've really tried to find out what's gone wrong here, but to no avail, any help you can offer would be hugely appreciated!

[pieh]

I've seen some problems when using gatsby-remark-relative-images plugin, which afaik is needed to be able to use image processing with NetlifyCMS. I will take a look at this

[JoshLong23]

You’re a star, thanks for having a look at this!

What I find weird (frustrating!), is that before it broke, it was working brilliantly, to the point where I was surprised at how easy it was to set up!

[pieh]

It seems like there is problem with gatsby-remark-copy-linked-files - after commenting this out of gatsby-config it works again - I will investigate this further - just wanted to share progress on this

[JoshLong23]

Interesting... when you say it works, what result did you get?

I’ve just tried commenting out that plugin, cleaned cache, removed package.lock and then did a build & serve, but still have the same results in terms of the image src being incorrect?

Oh and thanks for the update, can’t tell you how much I appreciate your help!

[pieh]

Yeah, after doing more investigating it seems like this was accidental - it seems somewhere else we have some problem with async code actually - I'm still checking this out - debugging async code is just the worst ;(

[pieh]

Ok, seems like last release of gatsby-transformer-remark introduced some regresssions with async code ( #7512 )

please pin version of gatsby-transformer-remark to 2.3.2 (remove ^ before the version in package.json)

[JoshLong23]

Tried doing that, did the same clean cache, delete node modules and .lock then did build and serve but still all the image src attributes are looking for ../../../static/assets.

Should that have been resolved now by pinning the version?

[pieh]

at least temporarirly, yes - when you remove ^ it "pins" version to be exact - yesteday release of gatsby-transformer-remark introduced some bugs (and this issue is example of problems it introduced), so using earlier release should solve the problem.

I just openend Pull Request with fix ( #12578 ), but it's not merged and released yet

[JoshLong23]

Hmm, where it still isn’t working for me, does that mean I’ve probably got another error somewhere else that’s causing the src paths to be incorrect?

[pieh]

can you paste gatsby info again?

[pieh]

I've merged the fix to gatsby-transformer-remark and published new version ( [email protected] ) which should fix this. I've also opened PR against your reproduction repo that bumps that package version - JoshLong23/barebones-NetlifyCMS#1

[JoshLong23]

Just tried it again now and we're all good! Thank you for working this out for me, I'd have never managed on my own!

I'm pretty new to the web dev community as a whole, only been doing this for 8 months or so, so I was just wondering what your process for working all this out was?

[pieh]

lot of trial error, console.log(s), checking git history with related packages and educated guesses ;)