Gatsby: GraphQL Error Unknown field `childImageSharp` on type `File`

[Kadrian]

How to use gatsby-image @ 2.0.0-rc.2?

Description

Can't get gatsby-image query to work. I'm also having difficulties understanding how to use

{
  imageSharp {
 ... 

vs

{
  file (...) {
    childImageSharp
  }

Can't get either of them to work.

Steps to reproduce

• Install all the latest versions of gatsby-image gatsby-plugin-sharp and gatsby-transformer-sharp.
• Add the plugin and transformer to the list of plugins in gatsby-config.js, start gatsby develop
• Try the query:

query XYZ {
  file(absolutePath: { eq: "Some/path/to/an/image.png" }) {
    childImageSharp {
      # Specify the image processing specifications right in the query.
      # Makes it trivial to update as your page's design changes.
      fluid(maxWidth: 2000) {
        ...GatsbyImageSharpFluid
      }
    }
  }
}

Error:

GraphQL Error Unknown field `childImageSharp` on type `File`

Expected result

The query compiles.

Actual result

The query doesn't compile.

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 9.5.0 - ~/.nvm/versions/node/v9.5.0/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v9.5.0/bin/npm
  Browsers:
    Chrome: 69.0.3497.92
    Firefox: 61.0.2
    Safari: 11.1.2
  npmPackages:
    gatsby: ^2.0.0-rc.15 => 2.0.0-rc.15 
    gatsby-image: ^2.0.0-rc.2 => 2.0.0-rc.2 
    gatsby-plugin-flow: ^1.0.1-rc.1 => 1.0.1-rc.1 
    gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0-rc.1 
    gatsby-plugin-sharp: ^2.0.0-rc.7 => 2.0.0-rc.7 
    gatsby-plugin-styled-components: ^3.0.0-rc.5 => 3.0.0-rc.5 
    gatsby-source-filesystem: ^2.0.1-rc.6 => 2.0.1-rc.6 
    gatsby-transformer-json: ^2.1.1-rc.6 => 2.1.1-rc.6 
    gatsby-transformer-sharp: ^2.1.1-rc.3 => 2.1.1-rc.3 

[kakadiadarpan]

@Kadrian Did you got a chance to check the example using-gatsby-images?

[Kadrian]

@kakadiadarpan Yes. Checking that example out, doing a yarn and gatsby develop in there works for me. So there must be some difference 😃

But I've been staring at the example for ages and I can't figure it out.
[email protected] is used in both, the example and my project. We're both adding the plugin to gatsby-config.js. This really should add childImageSharp ...

Weird is that the example doesn't even add gatsby-plugin-sharp as a plugin, like required in the documentation.

[stefanprobst]

Have you set up gatsby-source-filesystem in your gatsby-config.js?

[Kadrian]

Yes. So I hate to say it, but here's what happened:

I've re-installed gatsby-image@next and gatsby-source-filesystem@next and got:

error Plugin gatsby-transformer-sharp returned an error
Error: dlopen(/Users/path/to/project/node_modules/sharp/build/Release/sharp.node, 1): Library not loaded: @rpath/libvips-cpp.42.dylib

Then I removed all node_modules and yarned again. Now everything works 😭

[acgray]

FWIW I got rid of this by manually running yarn add sharp. I guess for some reason it wasn't included as a dependency.

[dongido001]

Thanks @acgray, that got it fixed for me

[meesern]

rm -rf node_modules/*
npm install
npm audit fix
gatsby clean  

Fixed it for me. gatsby clean is the one that made the difference I think.

[Daniel-Griffiths]

gatsby clean fixed it for me :smile:

[adisher]

gatsby clean helped to develop npm install sharp