gatsby
gatsby copied to clipboard
gatsbyjs
Image processing with wordpress-source-plugin attempts to load a non existent image from a production origin the 404 breaks the build
Preliminary Checks
- [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
- [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions
Description
We upgraded to Gatsby 4 using Wordpress as a source. The wordpress-source-plugin would not allow the site to build, failing on a 404 when trying to reach an image at our production origin.
ERROR
UNHANDLED REJECTION Unable to fetch:
https://my-site-production-url.com/static/ca2024176ddadfa27e5076b99a35845e/fec39/same-image-every-time.jpg
---
Reason: Response code 404 (Not Found)
---
Fetch details:
{
"attempt": 3,
"method": "GET",
"errorCode": "ERR_NON_2XX_3XX_RESPONSE",
"responseStatusCode": 404,
"responseStatusMessage": "Not Found",
"requestHeaders": {
"user-agent": "got (https://github.com/sindresorhus/got)",
"accept-encoding": "gzip, deflate, br"
},
"responseHeaders": {
"age": "67547",
"cache-control": "public, max-age=0, must-revalidate",
"content-encoding": "br",
"content-length": "66710",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 27 Jun 2022 21:34:44 GMT",
"etag": "1566246746-ssl-df",
"referrer-policy": "same-origin",
"server": "Netlify",
"strict-transport-security": "max-age=31536000",
"vary": "Accept-Encoding",
"x-content-type-options": "nosniff",
"x-frame-options": "DENY",
"x-nf-request-id": "01G6NHTHMMGPVT678ZG713JRV7",
"x-xss-protection": "1; mode=block",
"connection": "close"
}
}
---
WorkerError: Unable to fetch:
https://my-site-production-url.com/static/ca2024176ddadfa27e5076b99a35845e/fec39/same-image-every-time.jpg
---
Reason: Response code 404 (Not Found)
---
Fetch details:
{
"attempt": 3,
"method": "GET",
"errorCode": "ERR_NON_2XX_3XX_RESPONSE",
"responseStatusCode": 404,
"responseStatusMessage": "Not Found",
"requestHeaders": {
"user-agent": "got (https://github.com/sindresorhus/got)",
"accept-encoding": "gzip, deflate, br"
},
"responseHeaders": {
"age": "67547",
"cache-control": "public, max-age=0, must-revalidate",
"content-encoding": "br",
"content-length": "66710",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 27 Jun 2022 21:34:44 GMT",
"etag": "1566246746-ssl-df",
"referrer-policy": "same-origin",
"server": "Netlify",
"strict-transport-security": "max-age=31536000",
"vary": "Accept-Encoding",
"x-content-type-options": "nosniff",
"x-frame-options": "DENY",
"x-nf-request-id": "01G6NHTHMMGPVT678ZG713JRV7",
"x-xss-protection": "1; mode=block",
"connection": "close"
}
}
---
- manager.ts:311 enqueueJob
[v4]/[gatsby]/src/utils/jobs/manager.ts:311:21
not finished source and transform nodes - 252.672s
not finished gatsby-source-wordpress fetching nodes - 248.065s - 1684 total
not finished Downloading remote files - 246.715s
not finished gatsby-source-wordpress creating nodes - 220.565s
not finished gatsby-source-wordpress MediaItem - 220.569s - fetched 1115
not finished Running gatsby.IMAGE_CDN jobs - 218.858s
not finished Running gatsby.FILE_CDN jobs - 218.747s
The image url does not exist and it was the same url every time. We do not have Gatsby Image CDN turned on.
Adding these options to the wordpress configuration fixes the issues by not downloading and processing images.
html: {
useGatsbyImage: false,
createStaticFiles: false
}
There is a discussion about this issue in this thread https://wp-graphql.slack.com/archives/CJUBND25R/p1656433723880629
Reproduction Link
Since this reproduction would require a Wordpress instance, I am not including a repository. I can provide any details that would help
Steps to Reproduce
- Install latest plugins for Gatsby and Wordpress
- Deploy site on Gatsby Cloud
- Run a build using image processing
Expected Result
No error, site builds and processes images from Wordpress.
Actual Result
Once it gets to the processing of images from Wordpress we get this error.
ERROR
UNHANDLED REJECTION Unable to fetch:
https://my-site-production-url.com/static/ca2024176ddadfa27e5076b99a35845e/fec39/same-image-every-time.jpg
---
Reason: Response code 404 (Not Found)
---
Fetch details:
{
"attempt": 3,
"method": "GET",
"errorCode": "ERR_NON_2XX_3XX_RESPONSE",
"responseStatusCode": 404,
"responseStatusMessage": "Not Found",
"requestHeaders": {
"user-agent": "got (https://github.com/sindresorhus/got)",
"accept-encoding": "gzip, deflate, br"
},
"responseHeaders": {
"age": "67547",
"cache-control": "public, max-age=0, must-revalidate",
"content-encoding": "br",
"content-length": "66710",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 27 Jun 2022 21:34:44 GMT",
"etag": "1566246746-ssl-df",
"referrer-policy": "same-origin",
"server": "Netlify",
"strict-transport-security": "max-age=31536000",
"vary": "Accept-Encoding",
"x-content-type-options": "nosniff",
"x-frame-options": "DENY",
"x-nf-request-id": "01G6NHTHMMGPVT678ZG713JRV7",
"x-xss-protection": "1; mode=block",
"connection": "close"
}
}
---
WorkerError: Unable to fetch:
https://my-site-production-url.com/static/ca2024176ddadfa27e5076b99a35845e/fec39/same-image-every-time.jpg
---
Reason: Response code 404 (Not Found)
---
Fetch details:
{
"attempt": 3,
"method": "GET",
"errorCode": "ERR_NON_2XX_3XX_RESPONSE",
"responseStatusCode": 404,
"responseStatusMessage": "Not Found",
"requestHeaders": {
"user-agent": "got (https://github.com/sindresorhus/got)",
"accept-encoding": "gzip, deflate, br"
},
"responseHeaders": {
"age": "67547",
"cache-control": "public, max-age=0, must-revalidate",
"content-encoding": "br",
"content-length": "66710",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 27 Jun 2022 21:34:44 GMT",
"etag": "1566246746-ssl-df",
"referrer-policy": "same-origin",
"server": "Netlify",
"strict-transport-security": "max-age=31536000",
"vary": "Accept-Encoding",
"x-content-type-options": "nosniff",
"x-frame-options": "DENY",
"x-nf-request-id": "01G6NHTHMMGPVT678ZG713JRV7",
"x-xss-protection": "1; mode=block",
"connection": "close"
}
}
---
- manager.ts:311 enqueueJob
[v4]/[gatsby]/src/utils/jobs/manager.ts:311:21
not finished source and transform nodes - 252.672s
not finished gatsby-source-wordpress fetching nodes - 248.065s - 1684 total
not finished Downloading remote files - 246.715s
not finished gatsby-source-wordpress creating nodes - 220.565s
not finished gatsby-source-wordpress MediaItem - 220.569s - fetched 1115
not finished Running gatsby.IMAGE_CDN jobs - 218.858s
not finished Running gatsby.FILE_CDN jobs - 218.747s
Environment
System:
OS: macOS 11.6.1
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 103.0.5060.114
Firefox: 101.0.1
Safari: 14.1.2
npmPackages:
gatsby: ^4.18.0 => 4.18.0
gatsby-background-image: ^1.6.0 => 1.6.0
gatsby-background-image-es5: ^1.6.0 => 1.6.0
gatsby-image: ^3.11.0 => 3.11.0
gatsby-link: ^4.18.0 => 4.18.0
gatsby-plugin-eslint: ^4.0.2 => 4.0.2
gatsby-plugin-force-trailing-slashes: ^1.0.6 => 1.0.6
gatsby-plugin-gatsby-cloud: ^4.18.0 => 4.18.0
gatsby-plugin-i18n: ^1.0.1 => 1.0.1
gatsby-plugin-image: ^2.18.0 => 2.18.0
gatsby-plugin-iubenda-cookie-footer: ^1.4.0 => 1.4.0
gatsby-plugin-manifest: ^4.18.0 => 4.18.0
gatsby-plugin-netlify: ^5.0.0 => 5.0.0
gatsby-plugin-postcss: ^5.18.0 => 5.18.0
gatsby-plugin-react-helmet: ^5.18.0 => 5.18.0
gatsby-plugin-react-svg: ^3.1.0 => 3.1.0
gatsby-plugin-recaptcha: ^1.0.5 => 1.0.5
gatsby-plugin-remove-console: ^0.0.2 => 0.0.2
gatsby-plugin-remove-trailing-slashes: ^4.18.0 => 4.18.0
gatsby-plugin-sharp: ^4.18.0 => 4.18.0
gatsby-plugin-sitemap: ^5.18.0 => 5.18.0
gatsby-plugin-styled-components: ^5.18.0 => 5.18.0
gatsby-source-contentful: ^7.16.0 => 7.16.0
gatsby-source-filesystem: ^4.18.0 => 4.18.0
gatsby-source-hubspot: ^2.3.0 => 2.3.0
gatsby-source-wordpress: ^6.18.0 => 6.18.0
gatsby-transformer-remark: ^5.18.0 => 5.18.0
gatsby-transformer-sharp: ^4.18.0 => 4.18.0
npmGlobalPackages:
gatsby: 4.18.0
Config Flags
No flags used
Hey, I'm facing the same issue with exactly the same scenario: migrating a Gatsby site using Wordpress to Gatsby 4.
Have you find a workaround of any kind? I would hate to rollback the update because of this!
Hello, Do we have any solutions for this issue. Stuck on build error for more than 2 weeks now.
The same issue. It seems that the static folder for images wasn't created during production on Gatsby Cloud.
@Swiip @ethanwpdev @AndreasEracleous
the only way to get around this currently is to add this to the config.
{
resolve: `gatsby-source-wordpress`,
options: {
html: {
useGatsbyImage: false,
createStaticFiles: false,
}
},
},
this means sharp won't run, its not ideal at all but the site builds.
Is anyone able to share a reproduction GraphQL API endpoint for this? I'm not sure how to reproduce and debug the issue.
This is occurring on Gatsby 5.x even with useGatsbyImage and createStaticFiles set to false. Is there any workaround for this?
@TylerBarnes I will get one set up next week. Sorry for the delay on this. Thanks!
Same here.
Repro endpoint: https://icd.wordsinspace.net/graphql
Error:
gatsby-source-wordpress Error category: undefined
Error:
Internal server error
Debug message:
Expected a value of type "Int" but received: -62169984000
gatsby-source-wordpress Error occurred while fetching nodes of the "MediaItem" type.
Manually running queries for specific IDs I think the faulty MediaItems all share the following:
"ancestors": {
"nodes": [],
"pageInfo": {
"endCursor": null,
"hasNextPage": false,
"hasPreviousPage": false,
"startCursor": null
}
},
The pattern I've noticed is that the file in WordPress will be named something like image-800x600.jpg, and Gatsby will try to pull image.jpg and not find it. Have others found similar patterns?
Setting useGatsbyImage: false gets me past this blocker, but I would really like to be able to use the Gatsby Image optimizations.
I did a deep dive on this today and it appears to happen when you name a WP image file anything matching
new RegExp(`(?:[-_]([0-9]+)x([0-9]+))${fileExtension ? `\.${fileExtension}` : ``}`)
This is used in stripImageSizesFromUrl which is called from imageNodes.pushNodeMeta to de-dup the keys for dynamically resized imaged (I think). But later on fetchNodeHtmlImageMediaItemNodes that key is treated as a source URL rather than a lookup. I think the correct fix would be something like https://github.com/gatsbyjs/gatsby/blob/63e57cf3dd96083d219c09741a751206bb715a53/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/process-node.js#L200 being sourceUrl: existingNode.sourceUrl || sourceUrl, so a sourceUrl in the node would take priority if present?
Hiya!
This issue has gone quiet. Spooky quiet. 👻
We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!
Thanks for being a part of the Gatsby community! 💪💜
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hiya!
This issue has gone quiet. Spooky quiet. 👻
We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!
Thanks for being a part of the Gatsby community! 💪💜
Hiya!
This issue has gone quiet. Spooky quiet. 👻
We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!
Thanks for being a part of the Gatsby community! 💪💜
Hey again!
It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!
Thanks again for being part of the Gatsby community! 💪💜