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 versiongatsby-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.