Input file contains unsupported image format

Nowadays we are getting below error frequently while building the gatsby project where we used datocms as headless cms. We are using the plugin gatsby-source-datocms. Note that gatsby build works sometimes perfectly. This error is random, but it is happening frequently. One more thing is that this error is thrown on the different model (not always on the same model). We were using flamelink as headless cms before datocms. We had image download problem frequently, so build use to fail. That is the reason we have move from flamelink to datocms. But we ended up into same situation. This is very critical project for us. Please help us.


There was an error in your GraphQL query:

Input file contains unsupported image format

   1 | fragment GatsbyDatoCmsFluid_tracedSVG on DatoCmsFluid {
>  2 |   tracedSVG
     |   ^
   3 |   aspectRatio
   4 |   src
   5 |   srcSet
   6 |   sizes
   7 | }
   8 |
   9 | query DatoCmsGuide($pillarId: String!) {
  10 |   pillar: datoCmsGuide(id: {eq: $pillarId}) {
  11 |     id
  12 |     name

  Error: Input file contains unsupported image format

Hey @saran, did you try to set the failOnError: false option? This could help debug the situation!

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        // ...other options...
        failOnError: false,
      },
    },

I’m testing a website with thousands of images and the tracedSVG query is working fine… the error implies that gatsby-plugin-sharp cannot recognize a specific file as image… maybe also try to upgrade this dependency to the latest version available!

Hi s.verna

We are not getting this error always. Build works sometimes and it does not work sometimes. Anyway as you suggested we will upgrade gatsby-plugin-sharp and check. we will update back the status here after upgrading.

I had the version ^2.13.1 and upgraded to ^2.14.1 of gatsby-plugin-sharp. But even after upgrading i am getting the same error.

Try this:

  1. in your project open ./node_modules/gatsby-source-datocms/hooks/sourceNodes/createTypes/utils/getTracedSVG.js
  2. find these lines:
          case 4:
            absolutePath = _context.sent;
            name = path.basename(absolutePath);
            return _context.abrupt("return", traceSVG({
  1. add a console.log(absolutePath);:
          case 4:
            absolutePath = _context.sent;
            console.log(absolutePath);
            name = path.basename(absolutePath);
            return _context.abrupt("return", traceSVG({
  1. run gatsby

Hopefully we should be able to see which is the file with the problems (that is, the last one printed out before the error).

I set the property failOnError:false for the plugin gatsby-plugin-sharp and tried building. Build is broken, but I am not seeing any additional debug info. See the below error

There was an error in your GraphQL query:

Input file contains unsupported image format

   1 | fragment GatsbyDatoCmsFluid_tracedSVG on DatoCmsFluid {
>  2 |   tracedSVG
     |   ^
   3 |   aspectRatio
   4 |   src
   5 |   srcSet
   6 |   sizes
   7 | }
   8 |
   9 | query userssaranwsgtGwsgreythr4WebsitegatsbysrctemplatesmoduleJs2984280044($slug: String!, $regionRegx: String) {
  10 |   featuresList: allDatoCmsFeature(filter: {module: {slug: {eq: $slug}}, region: {regex: $regionRegx}}, sort:
{fields: displayOrder}) {
  11 |     nodes {
  12 |       title

@saran I’m sorry but with the level of information I have that’s all I can do. I’ve even tried the same query with your DatoCMS project, which I believe is greythr-website, and all SVGs are correctly generated:

I you’re confortable sharing privately your repo with us contact support@datocms.com, otherwise I’m out of ideas! :frowning:

Hello dato team,

We are still struggling with this issue. Anything else can be done.

Regards
Saran

As I told you, we can help you if we have access to the project… otherwise it’s impossible to debug. Yesterday we released a new version of the plugin, maybe try that one and see if it solves? :confused:

Hi s.verna

We will share the code. Let me know how to share it.

Regards
Saran

You can send us a mail to support@datocms.com with the ZIP of the project @saran!

@s.verna we are not able to send zip files through email as our email provider is blocking for security reasons. Is there any other way of securely transferring code to you?

You can share a private Gitlab repository, invite user @steffoz (that’s me) to the project and we’ll see what we can do!

@s.verna as suggested by you I have shared the gitlab code repo. Also sent a mail to support@datocms.com with the details of how to build.

Even today our build failed multiple times. This issue is an intermittent issue. The issue may not happen in the first time itself. But it is very frequent. Out of 10 builds 2 builds are getting succeeded. Issue what we think is that images are not getting downloaded completely, so it is throwing the error mentioned in the community forum.

So try executing the command “gatsby build” multiple times to reproduce this error.

Can you help us to resolve this issue?

@s.verna Thanks for providing the help to resolve this issue.

This issue is resolved after upgrading the plugin gatsby-source-datocms version to 2.6.6