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

[cmkshaw]

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

[kakadiadarpan]

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

@cmkshaw If you are still getting the above error, that might be an installation of sharp module.

Did you had a chance to look at image-processing example which showcases the use of gatsby-transformer-sharp and gatsby-plugin-sharp?

[cmkshaw]

Hello! I haven't looked at the plugin examples, because I haven't gotten that far yet... I just want to install plain ol' Gatsby 😅

I suppose I'm confused why I'm getting these issues on first install -- if there are plugins to be installed alongside Gatsby, shouldn't those be included in the very detailed setup guide?

[mgrubinger]

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

[DSchau]

@mgrubinger yikes! Did you mean gatsby-transformer-sharp there? In any scenario, would you be able to share a reproduction?

[mgrubinger]

@DSchau In my case it was related to gatsby-transform-manifest

Here's the error message:

error Plugin gatsby-plugin-manifest returned an error


  Error: dlopen(/Users/[removed]/node_modules/gatsby-plugin-manifest/n  ode_modules/sharp/build/Release/sharp.node, 1): Library not loaded: @rpath/libvips.42.dy  lib
    Referenced from: /Users/[removed]/node_modules/gatsby-plugin-manif  est/node_modules/sharp/vendor/lib/libvips-cpp.42.dylib
    Reason: Incompatible library version: libvips-cpp.dylib requires version 52.0.0 or lat  er, but libvips.42.dylib provides version 51.0.0

However, I could not create a reproduceable setup in a new project. It seems my problem was related to this issue: https://github.com/gatsbyjs/gatsby/issues/8852

I saw the message about the cached libvips after installation of [email protected] again, so I figured it there's an incompatibilty between sharp versions.

After removing the cached zip AND upgrading to [email protected] I was able to use [email protected] again, hooray!

Sorry for the confusion, I should have tried to upgrade gatsby-plugin-sharp earlier. But maybe my digging can be useful for other tho.

[cmkshaw]

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

[kakadiadarpan]

@cmkshaw @mgrubinger I'm not getting any errors when using [email protected].

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

[miyagui]

I just got the exact same error when grabbing gatsby-cli 2.44 using yarn.
With npm everything worked as usual.

OS: Manjaro 18.0

[jonniebigodes]

@miyagui from my experience with linux and gatsby, there's a need of the equivalent of build-essentials package for the distribution you're using and also python. This circumvents/fixes some issues experienced with plugin gatsby-plugin-sharp and nodegyp.

[chucksense]

This is happening for me too. Here is my Environment info:

 System:
    OS: macOS 10.14.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.3.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 63.0.3
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.53 => 2.0.63 
    gatsby-image: ^2.0.20 => 2.0.22 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.11 
    gatsby-plugin-offline: ^2.0.16 => 2.0.18 
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.4 
    gatsby-plugin-sharp: ^2.0.14 => 2.0.14 
    gatsby-source-filesystem: ^2.0.8 => 2.0.11 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.9 
  npmGlobalPackages:
    gatsby-cli: 2.4.6

[TristanTheKnightAway]

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.

[jonniebigodes]

@TristanTheKnightAway it's not actually gatsby fault,the issue lies with nodegyp, which is used by some of components/plugins, namely gatsby-plugin-sharp and as you can see here as it does not work with python 3. This is one of the situations that's outside the control of gatsby

[TristanTheKnightAway]

hey thanks @jonniebigodes for the comment and clarification. Wasn't trying to place blame on Gatsby, just trying to finger my specific issue. Helpful to know it's a node thing. I ran across a lot of open-ended error threads that didn't mention python so figured it was worth a mention here for someone else. I thought it strange when I saw a python fail somewhere down the line of blood red error messages and I'm super happy it turned out to be the culprit. I bet if I went to the Gatsby docs it's probably mentioned there...

[jonniebigodes]

@TristanTheKnightAway when i read your comment i understood where you were going and i was picking up on what i've said and expanding it a bit, so that this particular issue you were experiencing and for people that can be affect by this also, could pinpoint on the solution faster. Hope to see some content of yours in here in the near future 👍

[aflansburg]

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.

[americos]

I had this same issue using Gatsby 2.4.8, I tried @aflansburg fix and it worked for me

[tynsoltys]

Unfortunately none of the above are working for me, have replicated all of your above version combos to no avail. Figures this happens on the one afternoon I've allocated to play around with this, haha.

EDIT: Reverted back to python 2.7 and did this

Lovely day to you all.

[Darkhogg]

Gatsby 2.4.9 and still happening. After rm -rf node_modules; npm install everything is ok again. Something is very wrong with gatsby new if this happens... :confused:

[SpicyPete]

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

[waleedshkt]

Been through this issue of creating new Gatsby project,

I would say follow the latest installing instructions by Gatsby docs. Use npx gatsby new <yourProjectName> .

Just a small caution here: Make sure the username shown in the Windows terminal doesn't have any whitespace as otherwise you might get an error of something like 'get', or 'load', or 'loaded' not defined.

But if you successfully build the project and are using Windows OS, and you try to build development version of the project using npm run develop, npm tries to cause some issues.

My piece of advice (actually advice originally given by gatsby team itself) is to use Ubuntu Windows Subsystem for Linux(WSL). You can install it for free from Microsoft store.

Check out this link: https://www.gatsbyjs.org/docs/gatsby-on-windows/

You'll find at the very bottom of the page their recommendation to use WSL to install node modules. Just follow them and you'll find your gatsby project gets built without any issues. And of course, you can then do npm run develop in WSL too to start local dev server in your native Windows browser.

I hope this helps!

[441N143G]

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.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[AmberWilkie]

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.

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!