Gatsby + Contentful + Netlify - how to render tracedSVG images in production?

Question

I am building a website using Gatbsy, Contentful CMS and Netlify. It looks great and works locally but I have a problem in production regarding fluid images using the tracedSVG option. The Netlify deploy used to work on occasions and as I added more images to the project now breaks constantly with the following errors (not always in the same page):

10:53:45 AM: The GraphQL query from /opt/build/repo/src/pages/index.js failed.
10:53:45 AM: Errors:
10:53:45 AM:   VipsJpeg: Corrupt JPEG data: premature end of data segment
10:53:45 AM:   VipsJpeg: out of order read at line 544
10:53:45 AM:   GraphQL request:54:3
10:53:45 AM:   53 | fragment GatsbyContentfulFluid_tracedSVG on ContentfulFluid {
10:53:45 AM:   54 |   tracedSVG
10:53:45 AM:      |   ^
10:53:45 AM:   55 |   aspectRatio

or sometimes

error
The GraphQL query from /opt/build/repo/src/pages/index.js failed.
Errors: Input file contains unsupported image format
  GraphQL request:40:3
| fragment GatsbyContentfulFluid_tracedSVG on ContentfulFluid {
|   tracedSVG
|   ^
|   aspectRatio

and on rare occasions

Errors:
  VipsJpeg: Empty input file

(this last one not making sense as the images are present in Contentful and a required field of my content model)

As mentioned previously; the GraphQL query retrieving the tracedSVG images from Contentful work locally. My code is as follow:

import React from "react"
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = ({ data: { allContentfulIndexPage }) => {
  const { myImage } = allContentfulIndexPage.edges[0].node

  return (
    <div>
      {...someIrrelevantCodeToTheQuestion}
      <Img fluid={myImage.fluid}/>
    </div>
  )
}

export default IndexPage

export const query = graphql`
  query IndexPageQuery {
    allContentfulIndexPage {
      edges {
        node {
          myImage {
            fluid {
              ...GatsbyContentfulFluid_tracedSVG
            }
          }
        }
      }
    }
  }
`

By using GraphiQL I found out that locally using tracedSVG instead of ...GatsbyContentfulFluid_tracedSVG also works locally but it crashes just the same in a Production/Netlify environment. I considered using png images instead of jpg as the errors suggest something wrong with the files themselves although they render fine locally but the equivalent in png size would slow down the site (a jpg image of 100kB is roughly 900kb in png).

Did anyone encounter the same issue regarding tracedSVG rendering with jpg images in production and if this is the case how did you solve to stop recurrent crashes? Thank you.

Answer 1

It's been a month since I posted that question so thought I should post my non-solution but more like a work around in case someone faces the same issue. It seems that GatsbyContentfulFluid_tracedSVG is actually broken in production and the bug is unresolved to date.

I simply decided to revert to using a fluid solution instead of tracedSVG since it works in both development and production environments so having images as

<Img
  fluid={node.image.fluid} />

and queries as

node {
  image {
    fluid {
      ...GatsbyContentfulFluid
    }
  }
}

Answer 2

I have also a finding that might be a "non-solution". Seems that when I run the command gatsby clean in the terminal for the project and then commit and push a new change or just a fake change into the master, that is then built on Netlify, the error disappears. Suggests it is something cache related.