gatsby: gatsby-transformer-sharp returns an error

Description

Running gatsby develop with this as my config: NOTE: my code works if you remove

 `gatsby-remark-copy-linked-files`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 1080
      }

From the config file.

module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`
  },
  plugins: [
    `gatsby-remark-copy-linked-files`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 1080
      }
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "projects",
        path: `${__dirname}/src/pages/projects`
      }
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "blogs",
        path: `${__dirname}/src/pages/blogs`
      }
    },
    `gatsby-transformer-remark`,
    `gatsby-plugin-catch-links`,
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`
      }
    }
  ]
};

Without the first four plugins my code works Causes this error:

PS E:\Computer-Stuff\Javascript\2018\portfolio> gatsby develop
success open and validate gatsby-config — 0.009 s
success load plugins — 0.345 s
error Plugin gatsby-transformer-sharp returned an error


  Error: The specified module could not be found.
  \\?\E:\Computer-Stuff\Javascript\2018\portfolio\node_modules\sharp\build\Release\sharp.node

  - loader.js:718 Object.Module._extensions..node
    internal/modules/cjs/loader.js:718:18

  - loader.js:599 Module.load
    internal/modules/cjs/loader.js:599:32

  - loader.js:538 tryModuleLoad
    internal/modules/cjs/loader.js:538:12

  - loader.js:530 Function.Module._load
    internal/modules/cjs/loader.js:530:3

  - loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17

  - v8-compile-cache.js:159 require
    [portfolio]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - constructor.js:10 Object.<anonymous>
    [portfolio]/[sharp]/lib/constructor.js:10:15

  - v8-compile-cache.js:178 Module._compile
    [portfolio]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:700 Object.Module._extensions..js
    internal/modules/cjs/loader.js:700:10

  - loader.js:599 Module.load
    internal/modules/cjs/loader.js:599:32

  - loader.js:538 tryModuleLoad
    internal/modules/cjs/loader.js:538:12

  - loader.js:530 Function.Module._load
    internal/modules/cjs/loader.js:530:3

  - loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17

  - v8-compile-cache.js:159 require
    [portfolio]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - index.js:3 Object.<anonymous>
    [portfolio]/[sharp]/lib/index.js:3:15

  - v8-compile-cache.js:178 Module._compile
    [portfolio]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:700 Object.Module._extensions..js
    internal/modules/cjs/loader.js:700:10

  - loader.js:599 Module.load
    internal/modules/cjs/loader.js:599:32

  - loader.js:538 tryModuleLoad
    internal/modules/cjs/loader.js:538:12

  - loader.js:530 Function.Module._load
    internal/modules/cjs/loader.js:530:3

  - loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17

  - v8-compile-cache.js:159 require
    [portfolio]/[v8-compile-cache]/v8-compile-cache.js:159:20


error UNHANDLED REJECTION


  TypeError: Cannot read property 'filter' of undefined

  - api-runner-node.js:274 Promise.mapSeries.catch.then.results
    [portfolio]/[gatsby]/dist/utils/api-runner-node.js:274:42

  - util.js:16 tryCatcher
    [portfolio]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [portfolio]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [portfolio]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [portfolio]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [portfolio]/[bluebird]/js/release/promise.js:694:18

  - async.js:138 _drainQueueStep
    [portfolio]/[bluebird]/js/release/async.js:138:12

  - async.js:131 _drainQueue
    [portfolio]/[bluebird]/js/release/async.js:131:9

  - async.js:147 Async._drainQueues
    [portfolio]/[bluebird]/js/release/async.js:147:5

  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [portfolio]/[bluebird]/js/release/async.js:17:14


PS E:\Computer-Stuff\Javascript\2018\portfolio>

Steps to reproduce

Clear steps describing how to reproduce the issue. Please please please link to a demo project if possible, this makes your issue much easier to diagnose (seriously).

https://github.com/dumblole/portfolio

Clone the above repo

do a yarn install then do a gatsby develop

Expected result

What should happen?

Site should work and I can start to work with the four new packages I installed.

Actual result

I get an error when running gatsby develop

PS E:\Computer-Stuff\Javascript\2018\portfolio> gatsby develop
success open and validate gatsby-config — 0.009 s
success load plugins — 0.345 s
error Plugin gatsby-transformer-sharp returned an error


  Error: The specified module could not be found.
  \\?\E:\Computer-Stuff\Javascript\2018\portfolio\node_modules\sharp\build\Release\sharp.node

  - loader.js:718 Object.Module._extensions..node
    internal/modules/cjs/loader.js:718:18

  - loader.js:599 Module.load
    internal/modules/cjs/loader.js:599:32

  - loader.js:538 tryModuleLoad
    internal/modules/cjs/loader.js:538:12

  - loader.js:530 Function.Module._load
    internal/modules/cjs/loader.js:530:3

  - loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17

  - v8-compile-cache.js:159 require
    [portfolio]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - constructor.js:10 Object.<anonymous>
    [portfolio]/[sharp]/lib/constructor.js:10:15

  - v8-compile-cache.js:178 Module._compile
    [portfolio]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:700 Object.Module._extensions..js
    internal/modules/cjs/loader.js:700:10

  - loader.js:599 Module.load
    internal/modules/cjs/loader.js:599:32

  - loader.js:538 tryModuleLoad
    internal/modules/cjs/loader.js:538:12

  - loader.js:530 Function.Module._load
    internal/modules/cjs/loader.js:530:3

  - loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17

  - v8-compile-cache.js:159 require
    [portfolio]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - index.js:3 Object.<anonymous>
    [portfolio]/[sharp]/lib/index.js:3:15

  - v8-compile-cache.js:178 Module._compile
    [portfolio]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:700 Object.Module._extensions..js
    internal/modules/cjs/loader.js:700:10

  - loader.js:599 Module.load
    internal/modules/cjs/loader.js:599:32

  - loader.js:538 tryModuleLoad
    internal/modules/cjs/loader.js:538:12

  - loader.js:530 Function.Module._load
    internal/modules/cjs/loader.js:530:3

  - loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17

  - v8-compile-cache.js:159 require
    [portfolio]/[v8-compile-cache]/v8-compile-cache.js:159:20


error UNHANDLED REJECTION


  TypeError: Cannot read property 'filter' of undefined

  - api-runner-node.js:274 Promise.mapSeries.catch.then.results
    [portfolio]/[gatsby]/dist/utils/api-runner-node.js:274:42

  - util.js:16 tryCatcher
    [portfolio]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [portfolio]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [portfolio]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [portfolio]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [portfolio]/[bluebird]/js/release/promise.js:694:18

  - async.js:138 _drainQueueStep
    [portfolio]/[bluebird]/js/release/async.js:138:12

  - async.js:131 _drainQueue
    [portfolio]/[bluebird]/js/release/async.js:131:9

  - async.js:147 Async._drainQueues
    [portfolio]/[bluebird]/js/release/async.js:147:5

  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [portfolio]/[bluebird]/js/release/async.js:17:14


PS E:\Computer-Stuff\Javascript\2018\portfolio> 

Environment

Run gatsby info --clipboard in your project directory and paste the output here. Not working? You may need to update your global gatsby-cli - npm install -g gatsby-cli

PS E:\Computer-Stuff\Javascript\2018\portfolio> gatsby info --clipboard

  System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Binaries:
    Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.0.0 => 2.0.4
    gatsby-plugin-catch-links: ^2.0.2 => 2.0.2
    gatsby-plugin-emotion: ^2.0.5 => 2.0.5
    gatsby-plugin-sharp: ^2.0.5 => 2.0.5
    gatsby-plugin-typography: ^2.2.0 => 2.2.0
    gatsby-remark-copy-linked-files: ^2.0.5 => 2.0.5
    gatsby-remark-images: ^2.0.1 => 2.0.1
    gatsby-source-filesystem: ^2.0.1 => 2.0.1
    gatsby-transformer-remark: ^2.1.3 => 2.1.3
    gatsby-transformer-sharp: ^2.1.1 => 2.1.1

error The system cannot find the path specified.



  Error: The system cannot find the path specified.

  - envinfo.js:1 Function.e.exports.sync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:7778

  - envinfo.js:1 Object.copySync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:104976

  - envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:123499

  - envinfo.js:1
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124274

  - envinfo.js:1 Promise.all.then.e
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124289

  - util.js:16 tryCatcher
    [npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

  - promise.js:638 Promise._fulfill
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18

  - promise_array.js:126 PromiseArray._resolve
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:126:19

  - promise_array.js:144 PromiseArray._promiseFulfilled
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:144:14

  - promise.js:574 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:574:26

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18


error UNHANDLED REJECTION


  Error: The system cannot find the path specified.

  - envinfo.js:1 Function.e.exports.sync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:7778

  - envinfo.js:1 Object.copySync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:104976

  - envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:123499

  - envinfo.js:1
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124274

  - envinfo.js:1 Promise.all.then.e
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124289

  - util.js:16 tryCatcher
    [npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

  - promise.js:638 Promise._fulfill
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18

  - promise_array.js:126 PromiseArray._resolve
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:126:19

  - promise_array.js:144 PromiseArray._promiseFulfilled
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:144:14

  - promise.js:574 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:574:26

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18


PS E:\Computer-Stuff\Javascript\2018\portfolio>

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 31 (20 by maintainers)

Commits related to this issue

Most upvoted comments

I’m having the same problem. None of the above fixed it.

There are 2 problems with Gatsby:

1- Everyone involved in it wants to close all issues as soon as possible. The dirt under the rug is huge. This actually hurts Gatsby. Public Relations is not damaging the project by constantly doing this, it turns away many users who do not find answers. Basically it is really stupid.

2- The steps to install, configure and deploy example sites is a NIGHTMARE. Because:

  • There are no instructions which are comprehensive and self contained from soup to nuts. Most examples online fail with errors as numerous comments show

  • The incompatibility between VERSIONS of:

  • Gatsby
  • Nodejs
  • NPM
  • Plugins (required for each sample project)
  • Dependencies
  • gatsby-config.js mismatches and required changes over time
  • etc. (other libs/elements used)

means most sample projects do not work. Burying issues on github fast does not help.

Within a few months, the online instructions are all failures with insoluble errors, due to version/requirements mismatches. This is crazy and amateurish.

I estimate most new people, over half, give up because of these errors arising from incompatible requirements NOT LISTED ANYWHERE for even the simplest projects.

Most people do not have time to spend days trying every combination of commands on various folders.

I could setup and install the most complex sample project websites for Jekyll, Hugo & Hexo within hours for each. Without knowing anything about them prior.

But basically currently the Gatsby is a massive time killer which turns away most of those interested to look into it.

I would advise the founder of Gatsby, now starting his ventured capital startup to be informed of this post. I will not write this again anywhere.

You can bury this thread like the others too now.

Even though this might be old, I’ve actually been gotten this problem twice and so to anyone in the future that might need help for WINDOWS, this is what I did. Not in exact order since I repeated a couple things.

npm install sharp --verbose

Try to find if it’s cached anywhere. Or, you can just go to your npm_cache and delete _libvips folder. npm install -g windows-build-tools For me, both times, it stops in the middle. So what I did was end up installing 2017 visual studio. Basically this

Then I did the npm install again.

Restart your computer.

Deleted node_modules then did npm install and npm update and then npm rebuild.

It worked.

@garethpbk it should be a matter of just upgrading versions as @pieh said here.

We recently merged a PR which should (🤞) improve Windows support going forward with sharp and hopefully run into less issues!

Been battling with this issue for a while. At first I got a bunch of errors running gatsby develop, with sharp complaining about about some version of python path not found. Fixed that with npm install --global --production windows-build-tools

Then came this error

error Plugin gatsby-transformer-sharp returned an error Error: Could not locate the bindings file…

$ yarn add gatsby-plugin-sharp fixed the issue for me. Though I am still wondering why? Since at first am sure gatsby-plugin-sharp was already installed when I ran yarn install just after bootstrapping with gatsby-starter-default. For some reason it was not picking it,

I should mention that I used https://github.com/creationix/nvm to install Node 10.x to fix my issue.

@sterjoski sharp uses pre-compiled libraries which exist for node 6, 8 and 10, but not 11. http://sharp.pixelplumbing.com/en/stable/install/#building-from-source

I have the same problem.

I tried to delete /node_modules, .cache, /public, sudo npm cache clean --force, sudo npm install, sudo npm update, sudo npm rebuild, sudo npm install -g node-gyp, sudo npm install sharp

Nothing worked.

Here is the error

> sharp@0.21.1 install /Users/xxx/Sites/gatsby-prismic/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.7.0/libvips-8.7.0-darwin-x64.tar.gz
ERR! sharp EACCES: permission denied, open '/Users/xxx/Sites/gatsby-prismic/node_modules/sharp/75204-libvips-8.7.0-darwin-x64.tar.gz'
ERR! sharp Please see http://sharp.pixelplumbing.com/page/install
gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/xxx/Sites/gatsby-prismic/node_modules/sharp/build'
gyp ERR! System Darwin 18.0.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/xxx/Sites/gatsby-prismic/node_modules/sharp
gyp ERR! node -v v10.14.2
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sharp@0.21.1 install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sharp@0.21.1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxx/.npm/_logs/2019-01-03T09_19_24_432Z-debug.log

So I installed brew install vips --build-from-source

So one error gone (yay!), but still cannot install sharp…

info sharp Detected globally-installed libvips v8.7.2
info sharp Building from source via node-gyp
gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/xxx/Sites/gatsby-prismic/node_modules/sharp/build'
gyp ERR! System Darwin 18.0.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/xxx/Sites/gatsby-prismic/node_modules/sharp
gyp ERR! node -v v10.14.2
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sharp@0.21.1 install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sharp@0.21.1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I decided to try an alternative Yarn…

brew install yarn --without-node

then yarn on my project.

$ yarn

yarn install v1.12.3
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning gatsby > eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
warning styled-components > memoize-one@4.1.0: New custom equality api does not play well with all equality helpers. Please use v5.x
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "gatsby-plugin-lodash > lodash-webpack-plugin@0.11.5" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > gatsby-plugin-styled-components@3.0.4" has unmet peer dependency "babel-plugin-styled-components@>1.5.0".
[4/4] 📃  Building fresh packages...
$ gatsby develop

success onPostBootstrap — 0.138 s
 DONE  Compiled successfully in 3085ms 

Just fixed this issue by downgrading node to from 11.3 to 8.14. Now works like charm.

Been having the same issue on a Windows 10 machine; using Node x64, windows-build-tools installed, latest versions of Gatsby and all plugins installed, etc.

However - a new project with https://github.com/gatsbyjs/gatsby-starter-default, which now includes gatsby-image and the sharp plugins, does NOT produce the error. gatsby-image works as intended. Not sure what can explain this, but if you’re having this problem, try a new project with the default starter and see if it persists?

@dumblole You have gatsby-transformer-remark listed twice. Can you try removing one?

Hmm, this works for me. Did you see any errors when installing gatsby-plugin-sharp? I am not on Windows myself, but maybe the instructions for setting up a build environment on Windows are helpful?