V3 failed to create image node with URL

[OllieJT]

Prismic have been rolling out their built-in image compression that seems to apply parameters to the URL's. This is throwing an error when I try to use gatsby-image.

Example URL https://images.prismic.io/visualsbyimpulse/ebc69693-cd2e-4e5a-bb82-7f06fdcbd9c9_About+VBI.jpg?auto=compress,format&rect=20,0,3179,1510&w=160&h=76

Full Error Messy atm due to a logging issue that I think has been fixed now

Failed to validate error { ValidationError: child "error" fails because ["error" must be an object]
    at Object.exports.process (/Users/olliejt/Documents/GitHub/visuals-by-impulse/node_modules/@hapi/joi/lib/errors.js:202:19)
    at internals.Object._validateWithOptions (/Users/olliejt/Documents/GitHub/visuals-by-impulse/node_modules/@hapi/joi/lib/types/any/index.js:763:31)
    at module.exports.internals.Any.root.validate (/Users/olliejt/Documents/GitHub/visuals-by-impulse/node_modules/@hapi/joi/lib/index.js:145:23)
    at constructError (/Users/olliejt/Documents/GitHub/visuals-by-impulse/node_modules/gatsby/node_modules/gatsby-cli/lib/structured-errors/construct-error.js:42:29)
    at Object.error (/Users/olliejt/Documents/GitHub/visuals-by-impulse/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/index.js:194:29)
    at normalizeImageField (/Users/olliejt/Documents/GitHub/visuals-by-impulse/node_modules/gatsby-source-prismic/dist/gatsby-node.js:769:16)

  isJoi: true,
  name: 'ValidationError',
  details:
   [ { message: '"error" must be an object',
       path: [Array],
       type: 'object.base',
       context: [Object] } ],
  _object:
   { context:
      { sourceMessage:
         'gatsby-source-prismic - failed to create image node with URL: https://images.prismic.io/visualsbyimpulse/ebc69693-cd2e-4e5a-bb82-7f06fdcbd9c9_About+VBI.jpg?auto=compress,format&rect=20,0,3179,1510&w=160&h=76 undefined' },
     error:
      'failed to process https://images.prismic.io/visualsbyimpulse/ebc69693-cd2e-4e5a-bb82-7f06fdcbd9c9_About+VBI.jpg?auto=compress,format&rect=20,0,3179,1510&w=160&h=76\nRequestError: Request timed out',
     text:
      'gatsby-source-prismic - failed to create image node with URL: https://images.prismic.io/visualsbyimpulse/ebc69693-cd2e-4e5a-bb82-7f06fdcbd9c9_About+VBI.jpg?auto=compress,format&rect=20,0,3179,1510&w=160&h=76 undefined',
     level: 'ERROR',
     stack: [],
     docsUrl: 'https://gatsby.dev/issue-how-to' },
  annotate: [Function] }

...but I think it's this part that matters 'gatsby-source-prismic - failed to create image node with URL: https://images.prismic.io/visualsbyimpulse/ebc69693-cd2e-4e5a-bb82-7f06fdcbd9c9_About+VBI.jpg?auto=compress,format&rect=20,0,3179,1510&w=160&h=76 undefined'

[angeloashmore]

Hi @OllieJT, I’ve experienced this same error (hence the fix for the logging), but I haven’t determined a reason yet.

decodeURIComponent didn’t seem to make a difference so I don’t think it’s a character error. I fixed my particular issue by replacing the image on Prismic, suggesting it could be one of the URL parameters or the image itself.

[angeloashmore]

Side note: I’m working on gatsby-image support using Imgix in the aa/imgix branch. All images will have fluid and fixed fields with supporting fragments.

This should remove the long image processing times from builds and also circumvent issues like this one.

It’s published on the imgix tag on NPM, but no documentation yet.

[OllieJT]

I've got a site with a few hundred images. Is there anything I could log/do to help troubleshoot this? @angeloashmore

[angeloashmore]

@OllieJT Is there a particular image that you know causes it to hang?

Is https://images.prismic.io/visualsbyimpulse/ebc69693-cd2e-4e5a-bb82-7f06fdcbd9c9_About+VBI.jpg?auto=compress,format&rect=20,0,3179,1510&w=160&h=76 still causing Gatsby to hang?

I know it's tricky since leaving it in Prismic stops you from working.

[OllieJT]

I actually reverted back to not using Gatsby Image to get around this. I'm a little too busy at the moment to invest time in it again but will revisit this asap and return with an answer 👍 @angeloashmore

[angeloashmore]

Ok, sounds good, totally understand. The Imgix URLs are a better approach IMO anyway and will be merged in once @asyarb has a chance to check it out.

[giacomoalonzi]

Hello, I'm using the v3 beta and I'm trying to get the image normalized by the server instead build them on my own. I followed all steps to migrating from v2 to v3 but when I try to get images in this way

image {
            fluid(maxWidth: 1000, maxHeight: 800) {
              ...GatsbyPrismicImageFluid
            }
          }

I got this

Cannot query field "fluid" on type XXX

is this related to this issue?

Edit: I tried to indagate on this issue, it seems like here the createResolver doesn't work properly for both case. 🤔

[angeloashmore]

Hi @giacomoalonzi, can you ensure your schemas are up to date in your gatsby-config.js? Where it says XXX, did it have a type, or did it actually output “XXX”?

Thanks!

[giacomoalonzi]

Hi @giacomoalonzi, can you ensure your schemas are up to date in your gatsby-config.js? Where it says XXX, did it have a type, or did it actually output “XXX”?

Thanks!

Hey @angeloashmore thank you for the reply. Yes the XXX is a dummy placeholder but in reality I have errors like this Cannot query field "fluid" on type "PrismicProductsDataImagesImage"

I created a folder called schema and my configuration is:

{
      resolve: `gatsby-source-prismic`,
      options: {
        repositoryName: `myProject`,
        accessToken: `myaccessToken`,
        schemas: {
          event: require('./src/schemas/event.json'),
          firstLevelCategory: require('./src/schemas/firstLevelCategory.json'),
          secondLevelCategory: require('./src/schemas/secondLevelCategory.json'),
          product: require('./src/schemas/product.json'),
          index: require('./src/schemas/index.json'),
          about: require('./src/schemas/about.json'),
          contacts: require('./src/schemas/contacts.json'),
        }
      },
    },

I got the schema for each custom field from prismic and and i used my components name as keys. Let me know If I did something wrong, I tried a lot today to find a solution.

[angeloashmore]

Sorry for the frustration. Some of these errors are hard to track down.

A type name like "PrismicProductsDataImagesImage" looks like it's inferring the fields. That type name, for example, is probably a field like: "prismicProduct.data.images.image", where it should be "PrismicImageType".

Starting with v3.0.0-beta.13, types are no longer inferred and instead rely on your schemas for types.

Can you confirm you're running the latest beta version, v3.0.0-beta.16?

[giacomoalonzi]

@angeloashmore yes in using beta 16. What do you suggest to do to try to track down the issue? I would help 🙌

[sledomaltes]

Hi, I have the exact same problem as @giacomoalonzi, did you get anywhere with this? :-/ I feel like I'm going crazy over here.

[sledomaltes]

Hah! Some proper rubber-ducking in play here. I have literally spent a full day trying to solve this. Turns out I had misnamed my schema import in gatsby-config. Because of this graphql was infering the type and creating a big old mess.

For future googlers:

Problem: If you are getting "cannot query type X" on your prismic graphql query. Chances are you need to give it a correct schema. To do this

1) Copy the JSON schema from your custom type on prismic into a .json file. 2) In options : {schemas: {}} supply the schema with the exact name of the api key shown in prismic. For my example it was like this:

  schemas: {
                    product: require('./src/schemas/product.json'),
                    homepage: require('./src/schemas/homepage.json'),
                },

My error came from having "page" instead of homepage. Ie: DOUBLE CHECK THAT YOU HAVE THE EXACT KEY IN SCHEMAS

Cheerio!

[angeloashmore]

I'm cleaning out old issues and closing this due to its age. If this is still a problem, please open a new issue and I will take a look!