gatsby-image-plugin - Node process "SIGABRT"error

95 Views Asked by At

I'm having issues with graphql when trying to use gatsby-plugin-image. My node process crashes with error "SIGABRT" which indicates some kind of critical node memory threshold has been reached. As per the docs I have tried using graphql page queries, and useStaticQuery within a hook component. The images folder is in src at root, and only has around 150 images in it. I'm struggling to find any docs or examples of best practice for working with dynamic GatsbyImage as I'd like to pass the image as a prop.. can anyone shed any light on this? It seems width and or layout properties are required for the graphql query, as reducing the width of each image right down to 100 sometimes lets the process run and build complete. But it is intermittent, and crashes sometimes.

example page query:

export const Images = graphql
query {
  allFile(filter: { extension: { regex: "/(jpg)|(jpeg)|(png)/" }, relativeDirectory: { regex: "/(events)/" } }) {
    edges {
      node {
        id
        base
        name
        relativePath
        childImageSharp {
          gatsbyImageData(width: 100, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
        }
      }
    }
  }
}
;

example staticQuery:

const images = useStaticQuery(graphql
    query {
      allFile(filter: { extension: { regex: "/(jpg)|(jpeg)|(png)/" }, relativeDirectory: { regex: "/(events)/" } }) {
        edges {
          node {
            id
            base
            name
            relativePath
            childImageSharp {
              gatsbyImageData(width: 100, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
            }
          }
        }
      }
    }
  );
0

There are 0 best solutions below