Error when using any of the DuotoneGradient fields

[glennreyes]

Description

Using any of the duotone (type DuotoneGradient) fields by gatsby-transformer-sharp (highlight, shadow & opacity) leads to an error and exits entire server.

Steps to reproduce

• Install gatsby-starter-default
• Run yarn develop/gatsby develop
• Enter following snippet with opacity in GraphiQL (http://localhost:8000/__graphql)

{
  placeholderImage: file(relativePath: {eq: "gatsby-astronaut.png"}) {
    childImageSharp {
      fluid(maxWidth: 300, duotone: { opacity: 50 }) {
        src
      }
    }
  }
}

Expected result

Get src of half darken image in the response

Actual result

Entire app exits with this response in GraphiQL:

TypeError: Failed to fetch

In terminal:

glennreyes@breeze:Code/gatsby-starter ‹master*›$ yarn develop --verbose
yarn run v1.17.3
$ gatsby develop --verbose
verbose set gatsby_log_level: "verbose"
verbose set gatsby_executing_command: "develop"
verbose loading local command from: /Users/glennreyes/Code/gatsby-starter/node_modules/gatsby/dist/commands/develop.js
verbose running command: develop
success open and validate gatsby-configs - 0.050 s
success load plugins - 0.816 s
success onPreInit - 0.027 s
success initialize cache - 0.029 s
success copy gatsby files - 0.109 s
success onPreBootstrap - 0.040 s
success source and transform nodes - 0.141 s
success building schema - 0.341 s
success createPages - 0.022 s
success createPagesStatefully - 0.088 s
success onPreExtractQueries - 0.027 s
success update schema - 0.077 s
success extract queries from components - 0.348 s
success write out requires - 0.048 s
success write out redirect data - 0.028 s
success Build manifest and related icons - 0.199 s
success onPostBootstrap - 0.238 s
⠀
info bootstrap finished - 6.676 s
⠀
success Generating image thumbnails — 6/6 - 0.061 s

 ERROR 

UNHANDLED REJECTION {
  err: TypeError: Cannot read property '0' of null
      at createDuotoneGradient (/Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/duotone.js:54:53)
      at duotone (/Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/duotone.js:6:27)
      at /Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/process-file.js:175:30
      at Array.map (<anonymous>)
      at exports.processFile (/Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/process-file.js:109:21)
      at runJobs (/Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/scheduler.js:112:22)
      at /Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/scheduler.js:83:7
      at /Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/scheduler.js:22:3
      at /Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/node_modules/async/queue.js:10:5
      at Object.process (/Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/node_modules/async/internal/queue.js:175:17)
      at /Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/node_modules/async/internal/queue.js:82:19
      at Immediate.<anonymous> (/Users/glennreyes/Code/gatsby-starter/node_modules/gatsby-plugin-sharp/node_modules/async/internal/setImmediate.js:27:16)
      at processImmediate (internal/timers.js:439:21),
  message: 'Failed to process image /Users/glennreyes/Code/gatsby-starter/src/images/gatsby-astronaut.png'
}



  Error: {
    err: TypeError: Cannot read property '0' of null
  
  - duotone.js:54 createDuotoneGradient
    [gatsby-starter]/[gatsby-plugin-sharp]/duotone.js:54:53
  
  - duotone.js:6 duotone
    [gatsby-starter]/[gatsby-plugin-sharp]/duotone.js:6:27
  
  - process-file.js:175 
    [gatsby-starter]/[gatsby-plugin-sharp]/process-file.js:175:30
  
  - Array.map
  
  - process-file.js:109 exports.processFile
    [gatsby-starter]/[gatsby-plugin-sharp]/process-file.js:109:21
  
  - scheduler.js:112 runJobs
    [gatsby-starter]/[gatsby-plugin-sharp]/scheduler.js:112:22
  
  - scheduler.js:83 
    [gatsby-starter]/[gatsby-plugin-sharp]/scheduler.js:83:7
  
  - scheduler.js:22 
    [gatsby-starter]/[gatsby-plugin-sharp]/scheduler.js:22:3
  
  - queue.js:10 
    [gatsby-starter]/[gatsby-plugin-sharp]/[async]/queue.js:10:5
  
  - queue.js:175 Object.process
    [gatsby-starter]/[gatsby-plugin-sharp]/[async]/internal/queue.js:175:17
  
  - queue.js:82 
    [gatsby-starter]/[gatsby-plugin-sharp]/[async]/internal/queue.js:82:19
  
  - setImmediate.js:27 Immediate.<anonymous>
    [gatsby-starter]/[gatsby-plugin-sharp]/[async]/internal/setImmediate.js:27:16
  
  
  - message: 'Failed to process image /Users/glennreyes/Code/gatsby-starter/src/images/gatsby-astronaut.png'
  
  - }
  
  - index.js:101 process.<anonymous>
    [gatsby-starter]/[gatsby-cli]/lib/index.js:101:14
  
  - index.js:155 processEmit [as emit]
    [gatsby-starter]/[signal-exit]/index.js:155:32
  
  - promises.js:201 processPromiseRejections
    internal/process/promises.js:201:33
  
  - task_queues.js:86 processTicksAndRejections
    internal/process/task_queues.js:86:32
  

⠋ run static queries
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.6.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 64.0.2
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.13.25 => 2.13.25 
    gatsby-image: ^2.2.6 => 2.2.6 
    gatsby-plugin-manifest: ^2.2.3 => 2.2.3 
    gatsby-plugin-offline: ^2.2.4 => 2.2.4 
    gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2 
    gatsby-plugin-sharp: ^2.2.7 => 2.2.7 
    gatsby-source-filesystem: ^2.1.5 => 2.1.5 
    gatsby-transformer-sharp: ^2.2.3 => 2.2.3 

[pieh]

highlight and shadow options are required to use duotone - so full query would look like:

        childImageSharp {
          fluid(
            maxWidth: 300
            duotone: { opacity: 50, highlight: "#ff0000", shadow: "#00ff00" }
          ) {
            ...GatsbyImageSharpFluid
          }
        }

We currently don't set those arguments as required and don't check for existence of them and we crash in place expecting those arguments to be set when they're not. I will create PR with update to gatsby-transformer-sharp to mark those as required.