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

skovhus commented 4 years ago

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

1) yarn add gatsby-transformer-sharp@2.3.15 2) Then run a build using gatsby-transformer-sharp 3) 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

t2ca commented 4 years ago

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:

winstonma commented 4 years ago

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:

I use React@16.13.0 along with gatsby-transformer-sharp@2.3.14 there is no warning. The warning only arise when gatsby-transformer-sharp@2.3.15 is used.

skovhus commented 4 years ago

Thanks @winstonma and @t2ca. Yes, the regression is not related to the React version. It was introduced in gatsby-transformer-sharp@2.3.15.

LekoArts commented 4 years ago

Fixed in gatsby-transformer-sharp@2.3.16

esipavicius commented 4 years ago

Fixed in gatsby-transformer-sharp@2.3.16

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

sethburtonhall commented 4 years ago

Actually I am still getting this warning, even when running gatsby-transformer-sharp@2.3.16

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 gatsby-transformer-sharp@2.3.14?

"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 commented 4 years ago

@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 commented 4 years ago

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

vlknhslk commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

samgermain commented 4 years ago

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

sethburtonhall commented 4 years ago

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

Pedromigacz commented 3 years ago

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.

gatsbyjs / gatsby