Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
gatsby-source-wordpress is generating empty static image folders and img src's with `/.jpg`
See original GitHub issueDescription
Some of my images are ending up as empty .jpg for example,
<img style="max-width:100%;width:714px" class="wp-image-134084 inline-gatsby-image-wrapper" loading="eager" alt="High school students looking an viewer" src="/static/cb07fbdf7e4f7d2fb23c6a6c093ad32a/.jpg" data-reactroot="">
The image comes from a gutenberg block that exists in the content as:
<!-- wp:image {"id":134084,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.mywebsite.ca/wp-content/uploads/thumbs_highschool_1_web.jpg" alt="High school students looking an viewer" class="wp-image-134084"/></figure>
<!-- /wp:image -->
The referenced image exists in .wordpress-cache/wp-content/uploads but the folder in /public/static/cb07fbdf7e4f7d2fb23c6a6c093ad32a is empty
Steps to reproduce
I’m not sure how to reproduce as it is only for some images on the page - other images that also come from a gutenberg image block are working fine and the image is not 404’ing as it exists in the wordpress cache folders It seems something in the build step is randomly not processing images?
I realize it’s very hard to debug without a reproduction, hoping you’ve seen it before or can at least point me in the right direction to look into locally.
Expected result
All images in the content should be processed and working
Actual result
Some images are not being processed with no discernible difference between working and non working ones.
Environment
Run gatsby info --clipboard:
System:
OS: macOS 11.1
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 90.0.4430.212
Firefox: 88.0.1
Safari: 14.0.2
npmPackages:
gatsby: ^3.4.0 => 3.4.0
gatsby-plugin-gatsby-cloud: ^2.4.1 => 2.4.1
gatsby-plugin-image: ^1.4.0 => 1.4.0
gatsby-plugin-manifest: ^3.4.0 => 3.4.0
gatsby-plugin-offline: ^4.4.0 => 4.4.0
gatsby-plugin-postcss: ^4.4.0 => 4.4.0
gatsby-plugin-react-helmet: ^4.4.0 => 4.4.0
gatsby-plugin-sharp: ^3.4.0 => 3.4.0
gatsby-source-filesystem: ^3.4.0 => 3.4.0
gatsby-source-wordpress: ^5.4.0 => 5.4.0
gatsby-transformer-sharp: ^3.4.0 => 3.4.0
npmGlobalPackages:
gatsby-cli: 3.0.0
gatsby: 3.0.0
source options:
options: {
url: `http://mywebsite.local/graphql`, // local by flywheel site
html: {
createStaticFiles: true,
useGatsbyImage: true,
},
production: {
hardCacheMediaFiles: true,
allow404Images: true,
},
develop: {
hardCacheMediaFiles: true,
hardCacheData: true,
},
schema: {
timeout: 180000,
perPage: 100,
requestConcurrency: 10,
},
type: {
Page: {
where:
"in: [133383,133384,133387,137746,56290,133818,135336,133389,133391,133393,133421,133419,133413,133425,138782]",
},
},
},
Site Content size (perhaps it’s because it’s a large site?
success gatsby-source-wordpress fetch root fields - 2.385s
success gatsby-source-wordpress Wp - 0.005s - restored 1
success gatsby-source-wordpress WpContentType - 0.002s - restored 3
success gatsby-source-wordpress WpMediaItem - 0.002s - restored 2384
success gatsby-source-wordpress WpPage - 0.002s - restored 15
success gatsby-source-wordpress WpMenu - 0.002s - restored 4
success gatsby-source-wordpress WpPostFormat - 0.002s - restored 6
success gatsby-source-wordpress WpCategory - 0.002s - restored 34
success gatsby-source-wordpress WpMenuItem - 0.002s - restored 303
success gatsby-source-wordpress WpTag - 0.002s - restored 1363
success gatsby-source-wordpress WpPost - 0.002s - restored 3014
success gatsby-source-wordpress WpTaxonomy - 0.002s - restored 3
success gatsby-source-wordpress WpUser - 0.002s - restored 24
success gatsby-source-wordpress fetching nodes - 32.043s - 7154 total
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (6 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
exact same error message i’m getting
@TylerBarnes I’m not able to make the reproduction yet, but in the meantime, can you debug from a Gatsby Cloud build? https://www.gatsbyjs.com/dashboard/a655fbe7-36e7-4081-9d12-47e13b9d1fbd/sites/2f830116-e265-4753-bba8-72d515a879c3/builds/f7c9f1c6-6f1e-4b2d-8123-ad756b87d7d7/details#errors
It seems to be having a similar error, except this time the image is name
null.jpginstead of just.jpgand in the cloud build seems to have a bit more info:Error: Input file contains unsupported image format- unfortunately it doesn’t tell me what image or how to avoid inputting that image or fail gracefully. I assume it’s an unsupported format becausenull.jpgdoesn’t actually exist, so it’d be nice to know which image/MediaItem is being created without an actual image and why.