Sharp v0.23 removed overlayWith breaking gatsby-plugin-sharp

[kevinastone]

Description

v0.23 of Sharp (changelog) removed the deprecated overlayWith which is still in the gatsby-plugin-sharp master:

gatsby/packages/gatsby-plugin-sharp/src/duotone.js

Line 111 in 561d33e

.overlayWith(duotoneWithTransparency, {

gatsby-plugin-sharp current master and current latest released 2.2.18 declare sharp>=0.23 as a dependency:

This causes duotone to fail when rendering graphql.

Steps to reproduce

Here's my graphql that is failing after upgrading gatsby:

export const query = graphql`
  fragment Hero on MarkdownRemarkFrontmatter {
    hero {
      childImageSharp {
        fluid(
          quality: 80
          maxWidth: 1920
          duotone: {highlight: "#ffcc5c", shadow: "#ff6f69", opacity: 50}
        ) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

Expected result

Render the graphql successfully.

Actual result

error 


The GraphQL query from ${project-dir}/src/components/blog/post.tsx failed.

Errors:
  originalImage.overlayWith is not a function
  
  GraphQL request:24:7
  23 |     childImageSharp {
  24 |       fluid(quality: 80, maxWidth: 1920, duotone: {highlight: "#ffcc5c", shadow: "#ff6f69", opacity: 50}) {
     |       ^
  25 |         ...GatsbyImageSharpFluid
URL path:
  /generator-tests
Context:
  {
    "slug": "/generator-tests"
  }
Plugin:
  none
Query:
  query[...]ComponentsBlogPostTsx921560554(
    $slug: String!
  ) {
    markdownRemark(fields: {slug: {eq: $slug}}) {
      html
      excerpt
      frontmatter {
        ...Heading
        title
        tags
      }
    }
  }
  
  fragment Heading on MarkdownRemarkFrontmatter {
    title
    date(formatString: "MMMM DD, YYYY")
    ...Hero
  }
  
  fragment Hero on MarkdownRemarkFrontmatter {
    hero {
      childImageSharp {
        fluid(quality: 80, maxWidth: 1920, duotone: {highlight: "#ffcc5c", shadow: "#ff6f69", opacity: 50}) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
  
  fragment GatsbyImageSharpFluid on ImageSharpFluid {
    base64
    aspectRatio
    src
    srcSet
    sizes
  }

Environment

> gatsby info --clipboard

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 3.0.2 - /usr/local/bin/fish
  Binaries:
    Node: 12.9.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 66.0
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.1.0 => 2.14.2 
    gatsby-cli: ^2.4.9 => 2.7.19 
    gatsby-image: ^2.0.29 => 2.2.14 
    gatsby-plugin-catch-links: ^2.0.10 => 2.1.5 
    gatsby-plugin-emotion: ^4.0.3 => 4.1.4 
    gatsby-plugin-feed: ^2.0.13 => 2.3.9 
    gatsby-plugin-google-analytics: ^2.0.13 => 2.1.12 
    gatsby-plugin-lunr: ^1.4.0 => 1.5.2 
    gatsby-plugin-offline: ^2.0.23 => 2.2.10 
    gatsby-plugin-react-helmet: ^3.0.6 => 3.1.5 
    gatsby-plugin-robots-txt: ^1.4.0 => 1.5.0 
    gatsby-plugin-sharp: ^2.2.18 => 2.2.18 
    gatsby-plugin-sitemap: ^2.0.5 => 2.2.9 
    gatsby-plugin-typescript: ^2.1.2 => 2.1.5 
    gatsby-plugin-typography: ^2.2.7 => 2.3.5 
    gatsby-remark-autolink-headers: ^2.0.14 => 2.1.8 
    gatsby-remark-images: ^3.0.3 => 3.1.19 
    gatsby-remark-prismjs: ^3.2.4 => 3.3.9 
    gatsby-source-filesystem: ^2.0.20 => 2.1.18 
    gatsby-transformer-remark: ^2.2.4 => 2.6.19 
    gatsby-transformer-sharp: ^2.2.12 => 2.2.12 

[LekoArts]

Hi!

Can you create a reproduction project for that and link it here? My personal site uses the versions you specified and my builds works fine https://github.com/LekoArts/portfolio/blob/cc0d70d118c0d06736fccec43afa88cf6b42ce59/yarn.lock#L6391-L6413

[vhenzl]

@LekoArts There isn't any need for repro, all information provided by @kevinastone are clear:

• gatsby-plugin-sharp@2.2.19 depends on sharp@^0.23.0
• sharp@^0.23.0 removed overlayWith previously deprecated in v0.22.0 (v0.23.0 changelog)
• gatsby-plugin-sharp/src/duotone.js calls overlayWith

What maybe isn't clear from the description is that the problem occurs only if you actually use duotone in your query (as shown in the example above). That's why your site may work if you don't use it.

Deprecation warning from sharp v0.22: overlayWith(input, options) is deprecated, use composite([{ input, ...options }]) instead.

[LekoArts]

Should have added that I of course use duotone (https://github.com/LekoArts/portfolio/blob/cc0d70d118c0d06736fccec43afa88cf6b42ce59/src/templates/project.jsx#L172) in my site, wouldn't make sense to mention it otherwise. 😅

Hence we'd greatly appreciate a minimal reproduction or links to your repositories.

[kevinastone]

Here you go:
https://github.com/kevinastone/gatsby-plugin-sharp-issue-17162

[LekoArts]

Thanks for the repro, I'm also seeing this locally.

[kevinastone]

#17392 has the fix (and some unit tests that would have caught this dependency api change).

[wardpeet]

Published in gatsby-plugin-sharp@2.2.20