Example from using-gatsby-image doesn't work

[markelog]

Description

Example from using-gatsby-image doesn't work

Environment

Gatsby version: See using-gatsby-image package.json
Node.js version: 9.3.0
Operating System:

$ uname -a
Darwin demi 17.3.0 Darwin Kernel Version 17.3.0: Thu Nov  9 18:09:22 PST 2017; root:xnu-4570.31.3~1/RELEASE_X86_64 x86_64

Actual result

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  Error: Module build failed: Error: Cannot find module 'babel-preset-env' (While processing preset: "/Users/markelog/Workspace/gatsby/.babelrc  .js")

  - v8-compile-cache.js:162 Function.require.resolve
    [using-gatsby-image]/[v8-compile-cache]/v8-compile-cache.js:162:23

  - .babelrc.js:1 r
    /Users/markelog/Workspace/gatsby/.babelrc.js:1:86

  - .babelrc.js:28 preset
    /Users/markelog/Workspace/gatsby/.babelrc.js:28:9

  - option-manager.js:317
    [using-gatsby-image]/[babel-core]/lib/transformation/file/options/option-manager.js:317:46

  - Array.map

  - option-manager.js:275 OptionManager.resolvePresets
    [using-gatsby-image]/[babel-core]/lib/transformation/file/options/option-manager.js:275:20

  - option-manager.js:264 OptionManager.mergePresets
    [using-gatsby-image]/[babel-core]/lib/transformation/file/options/option-manager.js:264:10

  - option-manager.js:249 OptionManager.mergeOptions
    [using-gatsby-image]/[babel-core]/lib/transformation/file/options/option-manager.js:249:14

  - option-manager.js:368 OptionManager.init
    [using-gatsby-image]/[babel-core]/lib/transformation/file/options/option-manager.js:368:12

  - index.js:212 File.initOptions
    [using-gatsby-image]/[babel-core]/lib/transformation/file/index.js:212:65

  - index.js:135 new File
    [using-gatsby-image]/[babel-core]/lib/transformation/file/index.js:135:24

  - pipeline.js:46 Pipeline.transform
    [using-gatsby-image]/[babel-core]/lib/transformation/pipeline.js:46:16

  - index.js:46 transpile
    [using-gatsby-image]/[babel-loader]/lib/index.js:46:20

  - fs-cache.js:79
    [using-gatsby-image]/[babel-loader]/lib/fs-cache.js:79:18

  - fs-cache.js:15 ReadFileContext.callback
    [using-gatsby-image]/[babel-loader]/lib/fs-cache.js:15:14

Expected behavior

https://using-gatsby-image.gatsbyjs.org/ I guess?

Steps to reproduce

1. npm install

2. npm run develop

--

That's a nice blog post mentioned in the docs – https://medium.com/@kyle.robert.gill/ridiculously-easy-image-optimization-with-gatsby-js-59d48e15db6e

It would be really preferable though, I think, to have just bare bones example of such project on github or something, exactly how it mentioned in the docs or in that blog post

...

Thank you for the project btw!

[KyleAMathews]

Looks like an npm install error? Kill node_modules and try installing again?

Hear ya on the idea of having a more bare bones example. There's advantages to both more complete examples and barebones though.

[markelog]

Tried that couple of times (also with removing .cache as well), issue persist for me

[markelog]

There's advantages to both more complete examples and barebones though.

Sure, one is not excluding the other

[panzerdp]

Same issue for me.
Solved by hitting an npm install in the root directory of the repository.

Normally using-gatsby-image should be installed and work independently.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!