Unable to debug why ImageSharpFluid.AspectRatio not working #31450

rjsmith2 · 2021-05-17T16:13:54Z

rjsmith2
May 17, 2021

I've been stuck figuring out why this is happening:
"message": "Cannot return null for non-nullable field ImageSharpFluid.aspectRatio.",

I could not figure out what created this error after :
GraphQL query:

query Query {
  logo: file(relativePath: {
      regex: "/site-logo\\.png/"
    }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
}

If I switch from Fluid to Fixed, it works:

I am able to open png file directly, no sign of any image corruption visible on screen.

Here's the full message from erroring graphql (fluid):

{
  "errors": [
    {
      "message": "Cannot return null for non-nullable field ImageSharpFluid.aspectRatio.",
      "locations": [
        {
          "line": 14,
          "column": 3
        }
      ],
      "path": [
        "logo",
        "childImageSharp",
        "fluid",
        "aspectRatio"
      ],
      "stack": [
        "Error: Cannot return null for non-nullable field ImageSharpFluid.aspectRatio.",
        "    at completeValue (/home/ubuntu/site/node_modules/gatsby/node_modules/graphql/execution/execute.js:560:13)",
        "    at completeValueCatchingError (/home/ubuntu/site/node_modules/gatsby/node_modules/graphql/execution/execute.js:495:19)",
        "    at resolveField (/home/ubuntu/site/node_modules/gatsby/node_modules/graphql/execution/execute.js:435:10)",
        "    at executeFields (/home/ubuntu/site/node_modules/gatsby/node_modules/graphql/execution/execute.js:275:18)",
        "    at collectAndExecuteSubfields (/home/ubuntu/site/node_modules/gatsby/node_modules/graphql/execution/execute.js:713:10)",
        "    at completeObjectValue (/home/ubuntu/site/node_modules/gatsby/node_modules/graphql/execution/execute.js:703:10)",
        "    at completeValue (/home/ubuntu/site/node_modules/gatsby/node_modules/graphql/execution/execute.js:591:12)",
        "    at /home/ubuntu/site/node_modules/gatsby/node_modules/graphql/execution/execute.js:492:16",
        "    at tryCatcher (/home/ubuntu/site/node_modules/bluebird/js/release/util.js:16:23)",
        "    at Promise._settlePromiseFromHandler (/home/ubuntu/site/node_modules/bluebird/js/release/promise.js:547:31)",
        "    at Promise._settlePromise (/home/ubuntu/site/node_modules/bluebird/js/release/promise.js:604:18)",
        "    at Promise._settlePromise0 (/home/ubuntu/site/node_modules/bluebird/js/release/promise.js:649:10)",
        "    at Promise._settlePromises (/home/ubuntu/site/node_modules/bluebird/js/release/promise.js:729:18)",
        "    at _drainQueueStep (/home/ubuntu/site/node_modules/bluebird/js/release/async.js:93:12)",
        "    at _drainQueue (/home/ubuntu/site/node_modules/bluebird/js/release/async.js:86:9)",
        "    at Async._drainQueues (/home/ubuntu/site/node_modules/bluebird/js/release/async.js:102:5)"
      ]
    }
  ],
  "data": {
    "logo": {
      "childImageSharp": {
        "fluid": null
      }
    }
  },
  "extensions": {}
}

I tried using GatsbyImageSharpFluid_withWebp_noBase64, same result.
When I ran yarn dev, I too get this error:

gatsby-config.js:

const { createProxyMiddleware: proxy } = require("http-proxy-middleware");
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
});


const envOptions = process.env.GATSBY_PREVIEW
  ? {
    host: `preview.contentful.com`,
    accessToken:
      "---",
    refreshTimeout: 15000,
  }
  : {};

const contentfulOptions = {
  spaceId: "---",
  accessToken:
    "---",
  ...envOptions,
};

exports.siteMetadata = {
  siteUrl: process.env.SITE_URL || "---",
  siteTitle: "My Site",
};

/* export const proxy = process.env.CONTENTFUL_WEBHOOK_PORT && {
  prefix: "/___contentful-live",
  url: `http://localhost:${process.env.CONTENTFUL_WEBHOOK_PORT}/`,
};
 */

exports.developMiddleware = (app) => {
  app.use(
    "/api",
    proxy({
      target: process.env.PROXY_URL,
    })
  );
}

const regexExclude404AndOfflineShell = /^(?!\/(dev-404-page|404|offline-plugin-app-shell-fallback)).*$/;
exports.flags = {
  //PRESERVE_WEBPACK_CACHE: false,
  FAST_DEV: false,
  DEV_SSR: false,
  // QUERY_ON_DEMAND: true,
  // LAZY_IMAGES: true,
  //PRESERVE_FILE_DOWNLOAD_CACHE: true,
  // FAST_REFRESH: true,
  // PARALLEL_SOURCING: true,
}

exports.plugins = [
  {
    resolve: "gatsby-source-contentful",
    options: contentfulOptions,
  },
  {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      query: `
      {
        site {
          siteMetadata {
            siteUrl
          }
        }
        allSitePage(
          filter: {
            path: {
              regex: "${regexExclude404AndOfflineShell}"
            }
            context: {
              includeInSearchResults: {
                eq: true
              }
            }
          }
        ) {
          edges {
            node {
              path
            }
          }
        }
      }
      `,
    },
  },
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        "gatsby-remark-additional-options",
        "gatsby-remark-responsive-iframe",
        {
          resolve: `gatsby-remark-images`,
          options: {
            // It's important to specify the maxWidth (in pixels) of
            // the content container as this plugin uses this as the
            // base for generating different widths of each image.
            maxWidth: 590,
            // Remove the default behavior of adding a link to each
            // image.
            linkImagesToOriginal: false,
          },
        },
      ],
    },
  },
  {
    resolve: `gatsby-plugin-emotion`,
    options: {
      // Accepts the following options, all of which are defined by `@emotion/babel-plugin` plugin.
      // The values for each key in this example are the defaults the plugin uses.
      // sourceMap: true,
      // autoLabel: "dev-only",
      // labelFormat: `[local]`,
      // cssPropOptimization: true,
      //plugins:[`ramda`]
    },
  },
  // "gatsby-plugin-emotion", // We need more control over how this is loaded, so it's imported from our gatsby-* modules
  "gatsby-plugin-react-helmet",
  {
    resolve: "gatsby-plugin-google-analytics",
    options: {
      trackingId: "---",
      head: true,
    },
  },
  {
    resolve: "gatsby-plugin-netlify",
    options: {
      headers: {
        "/*": [`X-Frame-Options: SAMEORIGIN`],
      },
      mergeSecurityHeaders: false,
    },
  },
  "gatsby-plugin-nginx",
  "gatsby-plugin-sharp",
  "gatsby-transformer-sharp",
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `src`,
      path: `${__dirname}/src/`,
    },
  },
  {
    resolve: `gatsby-plugin-favicon`,
    options: {
      logo: "./src/favicon.png",
      injectHTML: true,
      icons: {
        android: true,
        appleIcon: true,
        favicons: true,
      },
    },
  },
  {
    resolve: "gatsby-plugin-google-tagmanager",
    options: {
      id: "---",
      includeInDevelopment: false,
    },
  },
];

Package.json:

{
...
  "dependencies": {
    "@emotion/react": "^11.1.4",
    "@emotion/styled": "^11.0.0",
    "@fortawesome/fontawesome": "^1.1.5",
    "@fortawesome/fontawesome-free-brands": "^5.0.9",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@std/esm": "^0.25.5",
    "@styled-system/prop-types": "^5.1.5",
    "@styled-system/theme-get": "^5.1.2",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-context": "^1.0.20",
    "apollo-link-error": "^1.1.13",
    "apollo-link-http": "^1.5.17",
    "apollo-link-retry": "^2.2.16",
    "apollo-link-schema": "^1.2.5",
    "camel-case": "^4.1.2",
    "clean-element": "^1.1.0",
    "core-js": "3.8.3",
    "date-fns": "2.17.0",
    "debounce": "^1.2.0",
    "detect-browser": "^5.2.0",
    "downshift": "^6.1.0",
    "facepaint": "^1.2.1",
    "file-saver": "^2.0.5",
    "flat": "^5.0.2",
    "formik": "2.2.6",
    "gatsby": "^2.31.1",
    "gatsby-image": "^2.10.0",
    "gatsby-link": "^2.10.0",
    "gatsby-plugin-emotion": "^5.3.0",
    "gatsby-plugin-favicon": "^3.1.6",
    "gatsby-plugin-google-analytics": "^2.10.0",
    "gatsby-plugin-google-tagmanager": "^2.10.0",
    "gatsby-plugin-netlify": "^2.10.0",
    "gatsby-plugin-offline": "^3.9.0",
    "gatsby-plugin-react-helmet": "^3.9.0",
    "gatsby-plugin-sharp": "2.13.3",
    "gatsby-plugin-sitemap": "^2.11.0",
    "gatsby-plugin-typography": "^2.11.0",
    "gatsby-react-router-scroll": "^3.6.0",
    "gatsby-remark-images": "^3.10.0",
    "gatsby-remark-responsive-iframe": "^2.10.0",
    "gatsby-source-contentful": "4.5.2",
    "gatsby-source-filesystem": "^2.10.0",
    "gatsby-transformer-remark": "^2.15.0",
    "gatsby-transformer-sharp": "^2.11.0",
    "graphql": "15.4.0",
    "graphql-tag": "^2.11.0",
    "graphql-tools": "^7.0.2",
    "grid-styled": "^2.0.0-12",
    "i18next": "^19.8.4",
    "i18next-browser-languagedetector": "^6.0.1",
    "intersection-observer": "^0.12.0",
    "is-function": "^1.0.2",
    "isomorphic-fetch": "^3.0.0",
    "match-sorter": "^6.1.0",
    "moment": "^2.29.1",
    "nuka-carousel": "^4.7.5",
    "numeral": "^2.0.6",
    "object-fit-images": "^3.2.4",
    "polished": "^4.1.0",
    "prop-types": "^15.7.2",
    "qs": "^6.9.6",
    "ramda": "^0.27.1",
    "react": "^16.14.0",
    "react-apollo": "^3.1.5",
    "react-apollo-hooks": "^0.5.0",
    "react-click-outside": "tj/react-click-outside",
    "react-dates": "^21.8.0",
    "react-dom": "^16.14.0",
    "react-emotion": "^10.0.0",
    "react-fns": "^1.4.0",
    "react-google-maps": "^9.4.5",
    "react-google-recaptcha": "^2.1.0",
    "react-helmet": "^6.1.0",
    "react-i18next": "^11.8.5",
    "react-icons": "^4.1.0",
    "react-load-script": "^0.0.6",
    "react-measure": "^2.5.2",
    "react-modal": "^3.12.1",
    "react-popper": "^2.2.4",
    "react-router-dom": "^5.2.0",
    "react-textarea-autosize": "^8.3.0",
    "recompose": "^0.30.0",
    "remark-breaks": "^2.0.1",
    "rifm": "^0.12.0",
    "scroll-into-view": "^1.15.0",
    "shevyjs": "^1.2.0",
    "slugify": "^1.4.6",
    "snake-case": "^3.0.4",
    "sort-json": "^2.0.0",
    "stickyfilljs": "^2.1.0",
    "string-format": "^2.0.0",
    "styled-system": "^5.1.5",
    "throttle-debounce": "^3.0.1",
    "title-case": "^3.0.3",
    "typography": "^0.16.19",
    "unstated": "^2.1.1",
    "uuid": "^8.3.2",
    "validate.js": "^0.13.1",
    "webfontloader": "^1.6.28"
  },
...
  "devDependencies": {
    "@babel/core": "7.12.1",
    "@babel/eslint-parser": "7.12.1",
    "@babel/node": "7.12.1",
    "@babel/plugin-proposal-class-properties": "7.12.1",
    "@babel/plugin-proposal-decorators": "7.12.1",
    "@babel/plugin-proposal-do-expressions": "7.12.1",
    "@babel/plugin-proposal-export-default-from": "7.12.1",
    "@babel/plugin-proposal-export-namespace-from": "7.12.1",
    "@babel/plugin-proposal-function-bind": "7.12.1",
    "@babel/plugin-proposal-function-sent": "7.12.1",
    "@babel/plugin-proposal-json-strings": "7.12.1",
    "@babel/plugin-proposal-logical-assignment-operators": "7.12.1",
    "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
    "@babel/plugin-proposal-numeric-separator": "7.12.1",
    "@babel/plugin-proposal-object-rest-spread": "7.12.1",
    "@babel/plugin-proposal-optional-chaining": "7.12.1",
    "@babel/plugin-proposal-pipeline-operator": "7.12.1",
    "@babel/plugin-proposal-throw-expressions": "7.12.1",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "7.12.1",
    "@babel/polyfill": "7.12.1",
    "@babel/preset-env": "7.12.1",
    "@babel/preset-react": "7.12.1",
    "@emotion/babel-plugin": "^11.1.2",
    "@storybook/addon-actions": "^6.1.15",
    "@storybook/addon-links": "^6.1.15",
    "@storybook/addon-viewport": "^6.1.15",
    "@storybook/addons": "^6.1.15",
    "@storybook/react": "^6.1.15",
    "apollo": "^2.32.1",
    "await-url": "^0.3.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.2.2",
    "babel-plugin-macros": "^3.0.1",
    "babel-plugin-optimize-hook-destructuring": "^1.3.0",
    "babel-plugin-ramda": "^2.0.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "babel-preset-gatsby": "^0.12.1",
    "cypress": "^6.3.0",
    "eslint": "^7.18.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-cypress": "^2.11.2",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "graphql-mock": "^1.3.0",
    "http-proxy-middleware": "^1.0.6",
    "identity-obj-proxy": "^3.0.0",
    "imports-loader": "^1.2.0",
    "jest": "^26.6.3",
    "pa11y-ci": "^2.4.0",
    "prettier": "2.2.1",
    "psi": "^4.1.0",
    "react-test-renderer": "^16.14.0",
    "react-icon-base":"^2.1.2"
  }
}

Things I've tried

delete yarn.lock, delete .cache folder, delete public folder, and node_modules folder. Ran yarn to regenerate yarn.lock and node_modules. Same error still.

ubuntu@LAPTOP-I21EVBCU:/mnt/c/Users/User/source/repos/gatsbyV1/packages/web$  gatsby info --clipboard

  System:
    OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 9 4900HS with Radeon Graphics
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.4/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  npmGlobalPackages:

Answered by rjsmith2

May 28, 2021

Was able to resolve my issue, one of my package:
"gatsby-image": "^2.10.0", was conflicting with "gatsby-remark-images": "^3.10.0", causing their ImageSharp dev dependencies to act weird. Bumping gatsby-image up to 3.10.0 to align with gatsby-remark-images helped fix my issue here.

View full answer

rjsmith2 · 2021-05-17T17:17:04Z

rjsmith2
May 17, 2021
Author

I also tried to update some packages to newer versions for V2, cleared out my yarn lock file and deleted node_modules folder, yarn installed again:

Did not seem to help fix the error.

3 replies

rjsmith2 May 24, 2021
Author

I tried to rework a solution based on the migration here:
https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/

query Query {
  myLogoWhite: file(relativePath: {
      regex: "/my-logo-white\\.png/"
    }) {
      childImageSharp {
        gatsbyImageData(layout:FIXED)
      }
    }
  myLogo: file(relativePath: {
      regex: "/my-logo\\.png/"
    }) {
      childImageSharp {
        gatsbyImageData(layout:CONSTRAINED, width:272)
      }
    }
  myLogoBlack: file(relativePath: {
      regex: "/my-logo-black\\.png/"
    }) {
      childImageSharp {
        gatsbyImageData(layout:FIXED, width:63, height: 63)
      }
    }
}

myLogo and myLogoBlack loaded successfully, while myLogoWhite failed with No image of the specified size found. Images may not have been processed correctly.

when I change it to my-logo-whites\.png to add a typo, it returns null and is successful so I know it finds a file
but why is it failing to process the first png file and not other 2 files?

I am able to open all three png files without a problem, so what is making sharp image fail to read the first png file?

rjsmith2 May 24, 2021
Author

In case you get this problem, someone named notaduck at discord suggested gatsby clean command so I ran yarn gatsby clean and then restarting dev. All png files now loads for me. Why does that fix my problem is beyond me, but I'm glad it worked.

rjsmith2 May 24, 2021
Author

I managed to get additional log somehow, something about vips_value_equal:

 ERROR

[object Object] Processing /home/ubuntu/mysite/packages/web/src/components/Layout/my-logo.png failed

Original error:

Failed to write /home/ubuntu/mysite/packages/web/src/components/Layout/my-logo.png into
/home/ubuntu/mysite/packages/web/public/static/d059380e083d0137bd67b95e58762a2d/2f13a/my-logo.webp. (Input file
contains unsupported image format)



  WorkerError: Processing /home/ubuntu/mysite/packages/web/src/components/Layout/my-logo.png failed
  Original error:
  Failed to write /home/ubuntu/mysite/packages/web/src/components/Layout/my-logo.png into /home/ubuntu/mysite/packages
  /web/public/static/d059380e083d0137bd67b95e58762a2d/2f13a/my-logo.webp. (Input file contains unsupported image for
  mat)

  - jobs-manager.ts:318 enqueueJob
    [mysite]/[gatsby]/src/utils/jobs-manager.ts:318:21


not finished Generating image thumbnails - 0.049s

vips_value_equal: no case for NULL, NULL
        t1 89358944, VipsImage
        t2 89358944, VipsImage
        generic 185, GParamObject
vips_value_equal: no case for 0, 0
        t1 24, gint
        t2 24, gint
        generic 251, GParamInt
vips_value_equal: no case for 0, 0
        t1 24, gint
        t2 24, gint
        generic 251, GParamInt

(sharp:16427): GLib-GObject-WARNING **: 14:16:56.736: ../gobject/gsignal.c:2731: instance '0x7f2950095e30' has no handler with id '10267'
vips_value_equal: no case for NULL, NULL
        t1 89358944, VipsImage
        t2 89358944, VipsImage
        generic 185, GParamObject
vips_value_equal: no case for 0, 0
        t1 24, gint
        t2 24, gint
        generic 251, GParamInt
vips_value_equal: no case for 0, 0
        t1 24, gint
        t2 24, gint
        generic 251, GParamInt

(sharp:16427): GLib-GObject-WARNING **: 14:16:56.737: invalid uninstantiatable type '(null)' in cast to 'VipsOperation'

(sharp:16427): GLib-GObject-WARNING **: 14:16:56.737: instance of invalid non-instantiatable type '(null)'

(sharp:16427): GLib-GObject-CRITICAL **: 14:16:56.738: g_signal_handler_disconnect: assertion 'G_TYPE_CHECK_INSTANCE (instance)' failed

(sharp:16427): GLib-GObject-WARNING **: 14:16:56.738: invalid uninstantiatable type '(null)' in cast to 'VipsObject'

(sharp:16427): GLib-GObject-CRITICAL **: 14:16:56.738: g_object_ref: assertion 'G_IS_OBJECT (object)' failed

(sharp:16427): GLib-GObject-CRITICAL **: 14:16:56.738: g_object_unref: assertion 'G_IS_OBJECT (object)' failed

(sharp:16427): GLib-GObject-CRITICAL **: 14:16:56.738: g_object_unref: assertion 'G_IS_OBJECT (object)' failed
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ubuntu@LAPTOP-I21EVBCU:~/mysite/packages/web$

rjsmith2 · 2021-05-28T13:40:39Z

rjsmith2
May 28, 2021
Author

Was able to resolve my issue, one of my package:
"gatsby-image": "^2.10.0", was conflicting with "gatsby-remark-images": "^3.10.0", causing their ImageSharp dev dependencies to act weird. Bumping gatsby-image up to 3.10.0 to align with gatsby-remark-images helped fix my issue here.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Unable to debug why ImageSharpFluid.AspectRatio not working #31450

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Unable to debug why ImageSharpFluid.AspectRatio not working #31450

Uh oh!

Uh oh!

rjsmith2 May 17, 2021

Replies: 2 comments · 3 replies

Uh oh!

rjsmith2 May 17, 2021 Author

Uh oh!

Uh oh!

rjsmith2 May 24, 2021 Author

Uh oh!

rjsmith2 May 24, 2021 Author

Uh oh!

Uh oh!

rjsmith2 May 24, 2021 Author

Uh oh!

rjsmith2 May 28, 2021 Author

rjsmith2
May 17, 2021

Replies: 2 comments 3 replies

rjsmith2
May 17, 2021
Author

rjsmith2 May 24, 2021
Author

rjsmith2 May 24, 2021
Author

rjsmith2 May 24, 2021
Author

rjsmith2
May 28, 2021
Author