Gatsby: First time expereince: WebpackError: ./.cache/develop-static-entry.js

[stereobooster]

Description

I followed step by step tutorial. When I got to this point https://www.gatsbyjs.org/tutorial/part-four/#your-first-graphql-query.

I started to get this error:

gatsby develop

> gatsby-starter-hello-world@ develop hello-world
> gatsby develop

success open and validate gatsby-configs — 0.009 s
success load plugins — 0.184 s
success onPreInit — 0.121 s
success delete html and css files from previous builds — 0.010 s
success initialize cache — 0.007 s
success copy gatsby files — 0.136 s
success onPreBootstrap — 0.014 s
success source and transform nodes — 0.021 s
success building schema — 0.220 s
success createPages — 0.001 s
success createPagesStatefully — 0.056 s
success onPreExtractQueries — 0.001 s
success update schema — 0.088 s
success extract queries from components — 0.037 s
success run graphql queries — 0.016 s — 3/3 235.36 queries/second
success write out page data — 0.012 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 3.226 s

here ./.cache/develop-static-entry.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
Error: [BABEL] hello-world/.cache/develop-static-entry.js: Cannot find module '@babel/core'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (hello-world/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at _core (hello-world/node_modules/@babel/plugin-proposal-async-generator-functions/lib/for-await.js:9:16)
    at Object.<anonymous> (hello-world/node_modules/@babel/plugin-proposal-async-generator-functions/lib/for-await.js:18:27)
    at Module._compile (hello-world/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (hello-world/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (hello-world/node_modules/@babel/plugin-proposal-async-generator-functions/lib/index.js:48:40)
    at Module._compile (hello-world/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
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
  WebpackError: ./.cache/develop-static-entry.js
  - universalModuleDefinition:9 _core
    lib/webpack/universalModuleDefinition:9:1
  - bootstrap:7 Object.<anonymous>
    lib/webpack/bootstrap:7:1
  - bootstrap:37 Object.<anonymous>
    lib/webpack/bootstrap:37:1

I tried to delete .cache and node_modules didn't help.

Steps to reproduce

git clone https://github.com/stereobooster/gatsby-hello-world
cd gatsby-hello-world
npm i 
gatsby develop

Expected result

developer server should start

Actual result

developer server doesn't start

Environment

  System:
    OS: macOS High Sierra 10.13.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
    Yarn: 1.5.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.14.1/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 62.0.3
    Safari: 11.0.3
  npmPackages:
    gatsby: ^2.0.33 => 2.0.67
    gatsby-plugin-emotion: ^3.0.1 => 3.0.1
    gatsby-plugin-typography: ^2.2.2 => 2.2.2
  npmGlobalPackages:
    gatsby-cli: 2.4.6

[jonniebigodes]

@stereobooster i'm cloning your repo and picking up from there and see if i can help solve this issue. What i would like for you to do beforehand is update your repo with the current version of the code, when you started having issues if you don't mind.

[stereobooster]

Updated

  npmPackages:
    gatsby: 2.0.67 => 2.0.67
    gatsby-plugin-emotion: 3.0.1 => 3.0.1
    gatsby-plugin-typography: 2.2.2 => 2.2.2
  npmGlobalPackages:
    gatsby-cli: 2.4.6

[jonniebigodes]

@stereobooster ok, good that updated the dependencies, but following the tutorial i was unable to reproduce your issue, everything worked out perfectly. And like i told you before, push your code to the repository that is giving you this error, so that i can take a look at it. This because the present code you have does not include this. It's the standard starter code. And i would like to see the actual code that's causing this, so we can resolve this. Sounds good?

[stereobooster]

And like i told you before, push your code to the repository that is giving you this error, so that i can take a look at it.

I did it. This is the code which produce the error. You are saying that you can't reproduce it? I guess issue is in my machine. The problem is that I can't fix it by removing node_modules.

[jonniebigodes]

@stereobooster when i asked for the update on my previous comments, was based that you were having issues when you created the graphql query and then issued gatsby develop and the error you mentioned happened.

[timotta]

I had the same problem and fixed putting this on babel configuration:

"babel": {
"presets": [
"babel-preset-gatsby"
],
...
}

[aerskine]

This problem gets more acute if babel@>7.7.0 -- for example gatsby-plugin-sharp@>2.3.2 will pull this version of babel in. Adding the above babel configuration as @timotta suggested fixes.

[tosebikan]

thank you timothy, this totally fixed my issue