Input file contains unsupported image format

saran · February 8, 2021, 1:40pm

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

s.verna · February 11, 2021, 2:34pm

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,
      },
    },

s.verna · February 11, 2021, 2:37pm

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!

saran · February 11, 2021, 4:28pm

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.

saran · February 11, 2021, 4:39pm

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.

s.verna · February 11, 2021, 4:49pm

Try this:

in your project open ./node_modules/gatsby-source-datocms/hooks/sourceNodes/createTypes/utils/getTracedSVG.js
find these lines:

          case 4:
            absolutePath = _context.sent;
            name = path.basename(absolutePath);
            return _context.abrupt("return", traceSVG({

add a console.log(absolutePath);:

          case 4:
            absolutePath = _context.sent;
            console.log(absolutePath);
            name = path.basename(absolutePath);
            return _context.abrupt("return", traceSVG({

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).

saran · February 11, 2021, 4:57pm

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

s.verna · February 12, 2021, 7:48am

@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!

saran · March 10, 2021, 5:58am

Hello dato team,

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

Regards
Saran

s.verna · March 10, 2021, 11:35am

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?

saran · March 11, 2021, 9:35am

Hi s.verna

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

Regards
Saran

s.verna · March 11, 2021, 9:58am

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

saran · March 11, 2021, 2:06pm

@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?

s.verna · March 12, 2021, 7:30am

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

saran · March 12, 2021, 10:19am

@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?

saran · March 18, 2021, 4:09pm

@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