[gatsby-plugin-sharp] Error when using resize(base64: true)

[troyfendall]

Description

When trying to use the resize method from gatsby-plugin-sharp with a parameter of base64: true I get the following error:

Errors:
  Cannot read property 'toFormatBase64' of undefined

  GraphQL request:4:7
  3 |     nodes {
  4 |       resize(width: 20, base64: true) {
    |       ^
  5 |         src

Steps to reproduce

Reproduction repository: https://github.com/troyfendall/gatsby-plugin-sharp-resize-bug

Use the following query:

    query IndexQuery {
        allImageSharp {
            nodes {
                resize(width: 20, base64: true) {
                    src
                }
            }
        }
    }

Expected result

What should happen?

A resized base64 image should be available for use and the build should succeed without error.

FWIW I traced through the gatsby-plugin-sharp code and found that defaulting args = {} on this line fixed the issue. Now, I don't know if the root issue is the lack of default or if there's an underlying issue that explains why the args are undefined there. Hopefully ya'll with better knowledge of the scheduler can decipher what's going on there.

Actual result

Errors:
  Cannot read property 'toFormatBase64' of undefined

  GraphQL request:4:7
  3 |     nodes {
  4 |       resize(width: 20, base64: true) {
    |       ^
  5 |         src

Environment

System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 69.0.1
    Safari: 13.0.3
  npmPackages:
    gatsby: 2.17.6 => 2.17.6
    gatsby-plugin-sharp: 2.2.36 => 2.2.36
    gatsby-source-filesystem: 2.1.35 => 2.1.35
    gatsby-transformer-sharp: 2.3.2 => 2.3.2

[LekoArts]

Thanks for the issue! Tagging my colleagues cc @gatsbyjs/core

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[wardpeet]

@troyfendall Thanks for opening this bug! This is a simple one to fix.

The error is at this line:

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

Line 154 in 0ebe2b4

async function generateBase64({ file, args, reporter }) {

The fix is to change this line into

async function generateBase64({ file, args = {}, reporter }) {

There might be something else going on but this at least fixes the error. More detective work is appreciated 🕵🕵️‍♀️.

[sidharthachatterjee]

This appears to have been fixed in #20158 thanks to @rileymiller

Let's close this issue. Thanks everyone!