gatsby-transformer-sharp returns an error

Created on 24 Sep 2018  ·  30Comments  ·  Source: gatsbyjs/gatsby

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>
stale? needs more info
Source
picture chiumax

Most helpful comment

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.

picture washere on 2 Jan 2019
👍20

All 30 comments

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?

stefanprobst picture stefanprobst on 24 Sep 2018
👍1

It's working for me too. 

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.11.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Safari: 12.0
  npmGlobalPackages:
    gatsby-cli: 2.4.1
krismorf picture krismorf on 24 Sep 2018

@dumblole I followed the steps that you provided, but unable to reproduce this issue.

Also, your gatsby-config.js is not the way it should be. gatsby-remark-images has to be used inside gatsby-transformer-remark as per it's documentation.

kakadiadarpan picture kakadiadarpan on 24 Sep 2018

@kakadiadarpan I just changed my config file but I am getting the exact same error.

PS E:\Computer-Stuff\Javascript\2018\portfolio> gatsby develop
success open and validate gatsby-config — 0.006 s
success load plugins — 0.159 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>

Config file: 

module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`
  },
  plugins: [
    `gatsby-remark-copy-linked-files`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590
            }
          }
        ]
      }
    },
    {
      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`
      }
    }
  ]
};

@stefanprobst
I have a theory as to why it doesn't work. When I reported earlier about issues with gatsby new I found out that the package sharp was causing all my problems. So I followed the guide to installing build-tools from here https://www.gatsbyjs.org/docs/gatsby-on-windows/. Which didn't work so I had to manually install using VS Community 2017. After that, I have been able to install my packages but I get the error that I've been showing here when running develop. The install takes a while, but it works without any errors.

chiumax picture chiumax on 24 Sep 2018

I have also come across this issue: https://github.com/lovell/sharp/issues/710 Where the error that novascreen gets is very similar to the error I'm getting but he said here https://github.com/lovell/sharp/issues/710#issuecomment-279279520 that all he did was restart his computer but nothing is working. I'm so frustrated that I've spent several days trying to solve this problem

chiumax picture chiumax on 24 Sep 2018

Have you tried with the x64 version of node? (Download)

stefanprobst picture stefanprobst on 24 Sep 2018

@stefanprobst I have it and I reinstalled it. I also reinstalled windows-build-tools but nothing works :C

chiumax picture chiumax on 24 Sep 2018

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

krismorf picture krismorf on 25 Sep 2018
👍1

@kmorf No effect

chiumax picture chiumax on 26 Sep 2018

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

kakadiadarpan picture kakadiadarpan on 23 Oct 2018

Maybe give this a go? https://github.com/gatsbyjs/gatsby/issues/3917/#issuecomment-366763228

sarahannnicholson picture sarahannnicholson on 26 Oct 2018

Also, please try updating gatsby-plugin-sharp and gatsby-transformer-sharp - we updated sharp version recently which potentially solves issues like that

pieh picture pieh on 26 Oct 2018

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?

garethpbk picture garethpbk on 29 Oct 2018
👍1

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

DSchau picture DSchau on 29 Oct 2018
👍3

Thanks @garethpbk will try.

Update: Worked! When in doubt, nuke it and start over 👍

benjaminspak picture benjaminspak on 31 Oct 2018

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.

gatsbot[bot] picture gatsbot[bot] on 15 Nov 2018

I am receiving this error while trying to get a fresh gatsby-site to run. Tried cleaning npm cache, removing node_module folders to no avail..

error UNHANDLED REJECTION
  Error: Unable to find plugin "gatsby-transformer-sharp". Perhaps you need to install its package?

That's my gatsby-config

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.app/offline
    // 'gatsby-plugin-offline',
  ],
}

And here's the output of gatsby info --clipboard
System: OS: macOS High Sierra 10.13.6 CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz Shell: 5.3 - /bin/zsh Binaries: Node: 11.3.0 - /usr/local/bin/node Yarn: 1.5.1 - ~/.yarn/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Browsers: Chrome: 70.0.3538.110 Firefox: 62.0.3 Safari: 12.0 npmPackages: gatsby: ^2.0.53 => 2.0.53 gatsby-image: ^2.0.20 => 2.0.20 gatsby-plugin-offline: ^2.0.16 => 2.0.16 gatsby-plugin-react-helmet: ^3.0.2 => 3.0.2 gatsby-source-filesystem: ^2.0.8 => 2.0.8 npmGlobalPackages: gatsby-cli: 2.4.

fleshgordo picture fleshgordo on 5 Dec 2018

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

fleshgordo picture fleshgordo on 5 Dec 2018
👍1

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.

chiumax picture chiumax on 13 Dec 2018
👍6

@fleshgordo that fixed it for me as well. Any idea why this is an issue? What's the difference between latest and 8.14?

sterjoski picture sterjoski on 24 Dec 2018

@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

krismorf picture krismorf on 24 Dec 2018
👍2

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.

washere picture washere on 2 Jan 2019
👍20

@washere Please be specific. Can you list examples or instructions that do not work? We've seen lately problems with sharp package installation but couldn't reproduce it (we tried using same OS, node, npm/yarn versions as ones reported in issue) and so it's not clear what and how to fix there.

pieh picture pieh on 2 Jan 2019

Error: EACCES: permission denied, mkdir '/Users/xxx/Sites/gatsby-prismic/node_modules/sharp/build'

This means you don't have write access to this directory. Check the directory permissions. The root cause is probably because you tried with sudo before.

stefanprobst picture stefanprobst on 3 Jan 2019

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 

> [email protected] 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! [email protected] 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 [email protected] 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! [email protected] 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 [email protected] 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 > [email protected]: CircularJSON is in maintenance only, flatted is its successor.
warning styled-components > [email protected]: 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 > [email protected]" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > [email protected]" 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
Steffi3rd picture Steffi3rd on 3 Jan 2019
👍1

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

sterjoski picture sterjoski on 3 Jan 2019
👍2

Using stable node version, not latest worked for me as well.

dzonib picture dzonib on 30 Jan 2019

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,

Sowed picture Sowed on 11 Mar 2019
👍2

I had the same problem about this gatsby-transformer-sharp.
but what i did to solved this problem was to install the extension c/c++ in the visual studio code
then install the "npm install --save gatsby-transformer-sharp gatsby-plugin-sharp" again.
then run "gatsby develop". so yeah finally it runs successfully!

marichellebisuna picture marichellebisuna on 17 Oct 2019

Resolved the same issue with

  • rm -rf node_modules
  • yarn install
Bojne picture Bojne on 15 Jul 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dustinhorton picture dustinhorton  ·  3Comments
ferMartz picture ferMartz  ·  3Comments
timbrandin picture timbrandin  ·  3Comments
signalwerk picture signalwerk  ·  3Comments
theduke picture theduke  ·  3Comments