gatsby: gatsby-transformer-sharp 2.3.15 regression: You can't use childImageSharp together with

Description

gatsby-transformer-sharp@2.3.15 (released a few hours ago) introduced a regression where it warns for any file types (even supported ones). See https://github.com/gatsbyjs/gatsby/pull/20782

The regression is caused by using a default export, but importing the file using require (without using .default).

When looking over the codebase it is a mix of import, default export, export, module.exports and require. Is the preferred coding style documented somewhere?

Steps to reproduce

yarn add gatsby-transformer-sharp@2.3.15
Then run a build using gatsby-transformer-sharp
See the warning

Expected result

There should not be a warning (same behavior as gatsby-transformer-sharp@2.3.14) for supported file types, and a warning for not supported file types.

Actual result

You can't use childImageSharp together with x.png — use publicURL instead. The childImageSharp portion of the query in this file
will return null:

Environment

System:
    OS: macOS Mojave 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i7-6660U CPU @ 2.40GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.10.1 - /usr/local/bin/npm
  Languages:
    Python: 3.7.5 - /usr/local/opt/python/libexec/bin/python
  Browsers:
    Chrome: 80.0.3987.122
    Firefox: 72.0.1
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.9.4 => 2.18.16
    gatsby-image: ^2.1.4 => 2.2.37
    gatsby-plugin-emotion: ^4.1.22 => 4.1.22
    gatsby-plugin-feed: ^2.2.3 => 2.3.25
    gatsby-plugin-google-analytics: ^2.1.4 => 2.1.31
    gatsby-plugin-manifest: ^2.1.1 => 2.2.34
    gatsby-plugin-offline: ^2.1.3 => 2.2.10
    gatsby-plugin-react-helmet: ^3.0.12 => 3.1.18
    gatsby-plugin-sharp: ^2.1.5 => 2.4.5
    gatsby-plugin-typescript: ^2.0.15 => 2.1.23
    gatsby-plugin-typography: ^2.2.13 => 2.3.20
    gatsby-remark-copy-linked-files: ^2.0.13 => 2.1.33
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^3.0.16 => 3.1.39
    gatsby-remark-prismjs: ^3.2.11 => 3.3.28
    gatsby-remark-responsive-iframe: ^2.1.1 => 2.2.30
    gatsby-remark-smartypants: ^2.0.9 => 2.1.19
    gatsby-source-filesystem: ^2.0.39 => 2.1.43
    gatsby-transformer-remark: ^2.4.0 => 2.6.45
    gatsby-transformer-sharp: ^2.3.15 => 2.3.15
```

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 16
Comments: 16 (5 by maintainers)

Most upvoted comments

This is how you can disable these warnings from the docs:

    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-sharp`,
      options: {
        // The option defaults to true
        checkSupportedExtensions: false,
      },
    },

+23

ThomasJanUta on Apr 4, 2020

Fixed in gatsby-transformer-sharp@2.3.16

LekoArts on Feb 27, 2020

Sry to revive this page, but I’m having the same error today with this as my package.json dependencies:

“dependencies”: { “axios”: “^0.21.1”, “framer-motion”: “^4.1.13”, “gatsby”: “^3.2.1”, “gatsby-image”: “^3.3.0”, “gatsby-plugin-google-fonts”: “^1.0.1”, “gatsby-plugin-react-svg”: “^3.0.1”, “gatsby-plugin-sharp”: “^3.3.0”, “gatsby-source-filesystem”: “^3.4.0”, “gatsby-source-strapi”: “0.0.12”, “gatsby-transformer-sharp”: “^3.3.0”, “react”: “^17.0.1”, “react-dom”: “^17.0.1”, “react-slick”: “^0.28.1”, “slick-carousel”: “^1.8.1” }

There is no .gif or .svg files being queried from my back-end server, (just some svgs served locally). The error appears only on production ‘gatsby build’ command (everything works fine on development ‘gatsby develop’ command): The errors are originated from dynamically created “productPages”, that breaks my application when the pages try to read this files. Is this a possible bug? I have my github repos if anyone wants them.

Pedromigacz on May 21, 2021

@sethburtonhall the error is correct, no need to rollback.

The new version of gatsby-transformer-sharp warns when a file is found that is not an image. In your case, the GraphQL query is finding a file my-image-or-.md-file, which is not an image.

skovhus on Feb 27, 2020

To anyone finding this issue: You can mute the warning now if you’re sure that you’re handling everything correctly yourself: https://github.com/gatsbyjs/gatsby/issues/21823

LekoArts on Mar 27, 2020

@skovhus answer seems to match up with your problem. Since childImageSharp will only be fetching images. In the case of the SVG and GIF, this error shows up.

Sujith46 on Mar 27, 2020

Just updated to the latest version of React@16.13.0 and I am getting the same warning.

warn You can't use childImageSharp together with Gatsby.png — use publicURL instead. The childImageSharp
portion of the query in this file will return null:

t2ca on Feb 26, 2020