gatsby: Errors on first install (childImageSharp/gatsby-transformer-sharp)

Hi! I did a quick command-F for childImageSharp/ gatsby-transformer-sharp in existing issues but didn’t see anything for first-time installers at a glance.

Description

I’ve followed the first three steps of your setup guide and am stalled with errors.

Steps to reproduce

Ran: npm install --global gatsby-cli gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default cd gatsby-site gatsby develop

Expected result

Gatsby will start a hot-reloading development environment accessible at localhost:8000

Actual result

~/documents/repos/gatsby-site $gatsby develop
success open and validate gatsby-configs — 0.007 s
success load plugins — 0.182 s
error Plugin gatsby-transformer-sharp returned an error


  Error: Cannot find module '../build/Release/sharp.node'
  
  - v8-compile-cache.js:159 require
    [gatsby-site]/[v8-compile-cache]/v8-compile-cache.js:159:20

… stuff

success onPreInit — 0.266 s
success delete html and css files from previous builds — 0.010 s
success initialize cache — 0.005 s
success copy gatsby files — 0.090 s
error Plugin gatsby-transformer-sharp returned an error


  Error: Cannot find module '../build/Release/sharp.node'

Multiple instances of:

error Plugin gatsby-transformer-sharp returned an error

finally,

ERROR in ./src/components/image.js
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/carolineshaw/Documents/Repos/gatsby-site/src/components/image.js
  21:11  error  Cannot query field "childImageSharp" on type "File"  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

 @ ./src/pages/index.js 12:0-40 49:25-30
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8000/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

Environment

 System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.4.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 63.0
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.19 => 2.0.31 
    gatsby-image: ^2.0.15 => 2.0.17 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.6 
    gatsby-plugin-offline: ^2.0.5 => 2.0.9 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-sharp: ^2.0.7 => 2.0.8 
    gatsby-source-filesystem: ^2.0.4 => 2.0.5 
    gatsby-transformer-sharp: ^2.1.4 => 2.1.5 
  npmGlobalPackages:
    gatsby-cli: 2.4.3

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 11
Comments: 24 (5 by maintainers)

Commits related to this issue

chore(gatsby-cli): add Python to envinfo settings (#10681) This adds Python to output of `gatsby info` `gatsby-plugin-sharp` is very widely used and is included in the default starter. `sharp` use... — committed to gatsbyjs/gatsby by sidharthachatterjee 6 years ago
chore(gatsby-cli): add Python to envinfo settings (#10681) This adds Python to output of `gatsby info` `gatsby-plugin-sharp` is very widely used and is included in the default starter. `sharp` use... — committed to gpetrioli/gatsby by sidharthachatterjee 6 years ago

Most upvoted comments

I’m having the same issue with v2.0.7, but still works with v2.0.5

You can try it with:

npm install --save gatsby-plugin-manifest@2.0.5

mgrubinger on Oct 29, 2018

Also running into this issue with the latest Gatsby 2.0.116 gatsby new is creating a project which fails to start.

SpicyPete on Feb 6, 2019

I just started using Gatsby and I can confirm I have this exact same issue, however my Python is at 2.7 so I’m not sure if that’s the cause in my case. I followed what another dev did in this issue #8148 and lo and behold it worked which makes it appear that there is some plugin issue. I just did:

npm i --global gatsby-image@next
npm i --global gatsby-source-filesystem@next

Then deleted node_modules in my existing project and then yarn install and everything worked as expected.

aflansburg on Jan 2, 2019

I was having this problem today - just opened up an old project and gatsby develop was giving me trouble (Cannot query field "childImageSharp" on type "File"). I recently re-install the CLI. Removing node_modules, gatsby clean, then yarn install worked for me.

AmberWilkie on Apr 6, 2019

I got the same issue with the first install and similar with the blog starter (Mac, node 11.11). What helped (BTW I don’t know why I did it, lol) - I looked what commands CLI has and tried ‘clean’ - and magic.

441N143G on Mar 9, 2019

still working on my solution but I think it may have to do with Python3 being the default version. Gatsby doesn’t support Python3 (EDIT: actually not Gatsby, but nodegyp that calls python - see comment below). In Nov 2018, I ran through the entire Gatsby tutorial with ease. Earlier in Dec 2018 I installed Python 3 for other purposes and when I run which python at terminal it gives me the link to Python 3. Haven’t totally fixed the problem yet but will update when I track down how to properly define the usage of Python 2 when running gatsby new gatsby-site.

EDIT: can confirm it was python 3 being called by node. Removing my (Anaconda-inserted) conda profile code from my .bash_profile allowed me to successfully npm install --global gatsby-cli again which let me gatsby new gatsby-site, cd gatsby-site, and gatsby develop. By removing the code that called python 3, OSX reverted to using the python 2.7.x it ships with.

TristanTheKnightAway on Dec 14, 2018

@cmkshaw @mgrubinger I’m not getting any errors when using gatsby-plugin-manifest@2.0.7.

Environment info:

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.9.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 62.0.3
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.19 => 2.0.34 
    gatsby-image: ^2.0.15 => 2.0.18 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.7 
    gatsby-plugin-offline: ^2.0.5 => 2.0.10 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.1 
    gatsby-plugin-sharp: ^2.0.7 => 2.0.10 
    gatsby-source-filesystem: ^2.0.4 => 2.0.6 
    gatsby-transformer-sharp: ^2.1.4 => 2.1.7 
  npmGlobalPackages:
    gatsby-cli: 2.4.4

kakadiadarpan on Oct 30, 2018

Using v2.0.5 works for me, thanks @mgrubinger.

cmkshaw on Oct 30, 2018