Fix Gatsby crash when uploading an image in WordPress

If you use Gatsby with WordPress, you may experience an unusual crash when uploading or updating an image within the content of a post.

The error should look something like this:

ERROR 
 Error: url passed to create-remote-file-node is either missing or not a proper web uri: /static/075258e1a57368af564e71111df41e1d/schermata-2021-01-25-alle-185334.png
     at module.exports (/xxx/node_modules/gatsby-source-wordpress-experimental/src/steps/source-nodes/create-nodes/create-remote-file-node/index.js:427:7)
     at remoteFileNode.retries (/xxx/node_modules/gatsby-source-wordpress-experimental/src/steps/source-nodes/create-nodes/create-remote-media-item-node.js:268:26)
 ERROR #gatsby-source-wordpress-experimental_112003 
 gatsby-source-wordpress 
     Encountered a critical error when running the sourceNodes.sourceNodes build step.     See above for more information.

The crash is related to the Gatsby gatsby-source-wordpress-experimental plugin and usually occurs on a WordPress installation with Gutenberg. The Gutenberg editor (but also WordPress 4.4 and later versions) manage post content’s images by adding the srcset attribute for optimization reasons.

This behavior conflicts with Gatsby that automatically applies the gatsby-image plugin to all the images inside post’s content, in order to optimize every resource in our website’s pages.

14/02/2021 UPDATE! You can now upgrade your gatsby-source-wordpress-experimental plugin to his stable version gatsby-source-wordpress@4.0.0. See how to upgrade to the stable version of Gatsby Source WordPress plugin.

In order to fix this error, we need to:

• normalize every media file name
• disable WordPress responsive images
• NEW! Upgrade to gatsby-source-wordpress v4

Normalize WordPress image’s file names

First of all, we need to make sure that all the filenames of our images are normalized, that is, that they do not contain unexpected characters.

To do so, we need to install Clean Image Filenames plugin for WordPress. Clean Image Filenames automatically converts language accent characters in filenames when uploading a media and takes care of cleaning the name from other unexpected character.

Thanks to this plugin we are sure that gatsby-source-wordpress-experimental will no longer crash if the image’s filename has unwanted character.

Disable WordPress responsive images in post’s content

By default, WordPress with Gutenberg tries to optimize images when they are inserted into the post’s content. On the other hand, we don’t need this. Gatsby will take care of everything for us (and WordPress).

To fix this issue, we need another plugin: Disable Responsive Images Complete.

Disable Responsive Images Complete completely disables WP responsive-image feature that has been introduced in version 4.4 and will allow Gatsby to take care of this instead of WordPress.

Conclusion

And voilà! Problem solved. In the end, we only had to install two plugins and that’s it.

Gatsby is a very powerful framework it’s focus is completely on resource optimization and performances. However, WordPress has also introduced similar functionality over time. For this reason, it can sometimes happen that something does not work properly. These problems, however, can be solved easly.