Fix Gatsby crash when uploading an image in WordPress
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-experimentalplugin to his stable version
email@example.com. 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
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.
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.