Gatsby: using-page-transitions does not work

[johnkorzhuk]

Description

The using-page-transitions/ example throws an error during both scripts develop and build.

Environment

Gatsby version: As specified in the example's package.json, currently, ^1.9.215
Node.js version: v9.3.0
Operating System: MacOS 10.13.3

File contents (if changed):

As they are in in the example.

Actual result

Pasted from terminal:

info bootstrap finished - 1.723 s

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/johnkorz/Documents/workspace/prac/gatsby/gatsby/.babelrc.js")

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

  - .babelrc.js:1 r
    /Users/johnkorz/Documents/workspace/prac/gatsby/gatsby/.babelrc.js:1:86

  - .babelrc.js:28 preset
    /Users/johnkorz/Documents/workspace/prac/gatsby/gatsby/.babelrc.js:28:9

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

  - Array.map

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

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

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

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

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

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

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

  - index.js:46 transpile
    [using-page-transitions]/[babel-loader]/lib/index.js:46:20

  - fs-cache.js:79
    [using-page-transitions]/[babel-loader]/lib/fs-cache.js:79:18

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

Expected behavior

The script to work?

Steps to reproduce

=> =>
1. clone repo

2.cd into examples/using-page-transitions/

3. npm install/yarn/
4. yarn develop
...

[tsriram]

Working for me on Linux / Node v8 (don't think it matters though)! gatsby version as in example's package version is ^1.9.102, not sure how you got ^1.9.215 though it's working with ^1.9.215 too.

[m-allanson]

It works OK for me also, macOS 10.13.3 and Node.js 9.5.0. Can you try removing node_modules and doing a fresh yarn?

[fk]

Just what I was about to say (Node 8.2.1 and OS X 10.11.6).

[flavioalves]

I'm having same issue (Node 6.10.3 and OS X 10.10.5)

[johnkorzhuk]

@m-allanson I've already tried that, but I went ahead and tried it again. Same result - same error.

[johnkorzhuk]

Also went ahead and installed node 9.5.0 since @m-allanson is on the same macOS version as me and got the same result.

[m-allanson]

I've tried again on the latest commit from the Gatsby repo and it seems ok here. There must be _something_ that we're doing differently though. Is any of this info useful?

/path/to/gatsby/examples/using-page-transitions

git branch
* master

git remote -v
origin  [email protected]:gatsbyjs/gatsby.git (fetch)
origin  [email protected]:gatsbyjs/gatsby.git (push)

node --version
v9.5.0

yarn --version
1.5.1

git log
commit 9b8497db19e15c1dc1e7ae049553a92635ee3be7 (HEAD -> master, tag: [email protected], origin/master, origin/HEAD)

[m-allanson]

Maybe try also deleting yarn.lock and doing a rm -r node_modules && yarn again.

[0xsven]

I am having the same error. My node version is v8.2.1. Other than that I have the exact setup as @m-allanson

[lawtontom]

I was having this issue too. I found that I needed to do a yarn install in the main gatsby directory, to pull in the dependancies in the babelrc file. Then the example works. Perhaps the readme requires an update?

[m-allanson]

@lawtontom Ah that could be it! @0xsven @johnkorzhuk @flavioalves could you try doing a yarn install at the top level of the gatsby repo?

[0xsven]

YES! That's what I was missing. Thank you!

[johnkorzhuk]

@lawtontom that was it. Thanks!