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

[skovhus]

Description

[email protected] (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

1) yarn add [email protected]
2) Then run a build using gatsby-transformer-sharp
3) See the warning

Expected result

There should not be a warning (same behavior as [email protected]) 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

[t2ca]

Just updated to the latest version of [email protected] 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:

[winstonma]

Just updated to the latest version of [email protected] 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:

I use [email protected] along with [email protected] there is no warning. The warning only arise when [email protected] is used.

[skovhus]

Thanks @winstonma and @t2ca. Yes, the regression is not related to the React version. It was introduced in [email protected].

[LekoArts]

Fixed in [email protected]

[esipavicius]

Fixed in [email protected]

Nice. Fast fix. I update just after hour and here it is :)

[sethburtonhall]

Actually I am still getting this warning, even when running [email protected]

warn You can't use childImageSharp together with (my-image-or-.md-file) — use publicURL instead. The childImageSharp portion of the query in this file will return null:

I deleted node_modules and ran npm install with the following dependencies.

Should I roll back to [email protected]?

"dependencies": {
    "@mdx-js/mdx": "^1.5.1",
    "@mdx-js/react": "^1.5.1",
    "babel-plugin-styled-components": "^1.10.0",
    "gatsby": "^2.3.25",
    "gatsby-image": "^2.0.39",
    "gatsby-plugin-feed-mdx": "^1.0.0",
    "gatsby-plugin-google-analytics": "^2.0.18",
    "gatsby-plugin-manifest": "^2.0.29",
    "gatsby-plugin-mdx": "^1.0.52",
    "gatsby-plugin-netlify": "^2.1.32",
    "gatsby-plugin-netlify-cms": "^4.0.0",
    "gatsby-plugin-netlify-cms-paths": "^1.3.0",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-sharp": "^2.4.5",
    "gatsby-plugin-styled-components": "^3.0.7",
    "gatsby-plugin-typography": "^2.2.13",
    "gatsby-remark-copy-linked-files": "^2.0.11",
    "gatsby-remark-images": "^2.0.6",
    "gatsby-remark-relative-images": "^0.3.0",
    "gatsby-remark-responsive-iframe": "^2.1.1",
    "gatsby-remark-smartypants": "^2.0.9",
    "gatsby-remark-vscode": "^1.0.4",
    "gatsby-source-filesystem": "^2.1.48",
    "gatsby-transformer-remark": "^2.6.53",
    "gatsby-transformer-sharp": "^2.3.16",
    "netlify-cms-app": "^2.9.1",
    "react": "^16.8.6",
    "react-burger-menu": "^2.6.13",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0",
    "react-switch": "^5.0.0",
    "react-typography": "^0.16.19",
    "styled-components": "^4.2.0",
    "typeface-merriweather": "0.0.72",
    "typeface-montserrat": "0.0.54",
    "typography": "^0.16.19",
    "typography-theme-wordpress-2016": "^0.16.19"
  },

[skovhus]

@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.

[sethburtonhall]

Thanks @skovhus. Yes, I realized the issue was having .gif file type in my markdown files.

[vlknhslk]

Can you please check mine - I am getting this warning - all my packages are updated.

"dependencies": {
"@mdx-js/mdx": "^1.5.8",
"@mdx-js/react": "^1.5.8",
"aos": "^3.0.0-beta.6",
"gatsby": "^2.20.7",
"gatsby-cli": "^2.11.2",
"gatsby-image": "^2.3.1",
"gatsby-plugin-antd": "^2.2.0",
"gatsby-plugin-google-tagmanager": "^2.2.1",
"gatsby-plugin-intl": "^0.3.3",
"gatsby-plugin-less": "^3.1.1",
"gatsby-plugin-mailchimp": "^5.1.2",
"gatsby-plugin-manifest": "^2.3.3",
"gatsby-plugin-mdx": "^1.1.3",
"gatsby-plugin-netlify": "^2.2.1",
"gatsby-plugin-offline": "^3.1.2",
"gatsby-plugin-page-creator": "^2.2.1",
"gatsby-plugin-react-helmet": "^3.2.1",
"gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
"gatsby-plugin-robots-txt": "^1.5.0",
"gatsby-plugin-sass": "^2.2.1",
"gatsby-plugin-sharp": "^2.5.3",
"gatsby-plugin-sitemap": "^2.3.1",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-remark-images": "^3.2.1",
"gatsby-remark-reading-time": "^1.1.0",
"gatsby-source-filesystem": "^2.2.2",
"gatsby-transformer-json": "^2.3.1",
"gatsby-transformer-remark": "^2.7.1",
"gatsby-transformer-sharp": "^2.4.2",
"gulp-sass": "4.0.2",
"less": "^3.11.1",
"node-sass": "^4.13.1",
"prop-types": "^15.7.2",
"rc-drawer": "^3.1.3",
"rc-queue-anim": "^1.8.4",
"rc-scroll-anim": "^2.7.4",
"rc-tween-one": "^2.6.8",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^5.2.1",
"react-share": "^4.1.0",
"react-visibility-sensor": "^5.1.1",
"to": "^0.2.9",
"update": "^0.7.4"
},

[Sujith46]

@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.

[LekoArts]

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

[ThomasJanUta]

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,
      },
    },

[vlknhslk]

Thank you for your response - I've tried it but still there :(

[samgermain]

@sethburtonhall what exactly do you mean by you had .gif in your markdown files, like you had them in the same directory?

[sethburtonhall]

@samgermain It has been a while ... but I believe I was adding markdown images via the richtext editor and they were the .gif filetype and they were being treated as video, aka not an image.