Fresh gatsby site fails with "TypeError: formatStaticBuildError is not a function"

[stefanwille]

This is my setup on a MacBook Air with Sierra:

$ yarn --version
0.27.5
$ npm --version
5.4.1
$ node --version
$ npm install -g gatsby-cli
$ gatsby --version
1.1.6
$ gatsby new tutorial-part-one
$ cd tutorial-part-one

And just from doing this, I get this error:

$ npm run develop

> [email protected] develop /Users/stefan/Projects/React/Gatsby/tutorial-part-one
> gatsby develop

success delete html files from previous builds — 0.007 s
success open and validate gatsby-config.js — 0.004 s
success copy gatsby files — 0.019 s
success source and transform nodes — 0.021 s
success building schema — 0.086 s
success createLayouts — 0.023 s
success createPages — 0.004 s
success createPagesStatefully — 0.010 s
success extract queries from components — 0.080 s
success run graphql queries — 0.013 s
success write out page data — 0.004 s
success update schema — 0.056 s

info bootstrap finished - 1.874 s

error UNHANDLED EXCEPTION


  Error: ENOENT: no such file or directory, open '/Users/stefan/Projects/React/Gatsby/tutorial-part-one/public/render-page.js.map'

  - prepare-stack-trace.js:17 prepareStackTrace
    [tutorial-part-one]/[gatsby]/dist/reporter/prepare-stack-trace.js:17:35

  - errors.js:55 createErrorFromString
    [tutorial-part-one]/[gatsby]/dist/reporter/errors.js:55:22

  - develop-html.js:49
    [tutorial-part-one]/[gatsby]/dist/utils/develop-html.js:49:33

  - Compiler.js:194 Compiler.<anonymous>
    [tutorial-part-one]/[webpack]/lib/Compiler.js:194:14

  - Compiler.js:282 Compiler.emitRecords
    [tutorial-part-one]/[webpack]/lib/Compiler.js:282:37

  - Compiler.js:187 Compiler.<anonymous>
    [tutorial-part-one]/[webpack]/lib/Compiler.js:187:11

  - Compiler.js:275
    [tutorial-part-one]/[webpack]/lib/Compiler.js:275:11

  - Tapable.js:60 Compiler.applyPluginsAsync
    [tutorial-part-one]/[tapable]/lib/Tapable.js:60:69

  - Compiler.js:272 Compiler.afterEmit
    [tutorial-part-one]/[webpack]/lib/Compiler.js:272:8

  - Compiler.js:267 Compiler.<anonymous>
    [tutorial-part-one]/[webpack]/lib/Compiler.js:267:14

  - async.js:52
    [tutorial-part-one]/[async]/lib/async.js:52:16

  - async.js:236 Object.async.forEachOf.async.eachOf
    [tutorial-part-one]/[async]/lib/async.js:236:30

  - async.js:209 Object.async.forEach.async.each
    [tutorial-part-one]/[async]/lib/async.js:209:22

  - Compiler.js:235 Compiler.emitFiles
    [tutorial-part-one]/[webpack]/lib/Compiler.js:235:20


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop 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/stefan/.npm/_logs/2017-09-09T12_16_51_844Z-debug.log

This issue could be the same: #1976

What can I do to fix this?

Thanks in advance!

[markmichon]

@stefanwille Your node --version doesn't show anything. Perhaps your node version is a problem? I just attempted to replicate this with your command order and it works without a problem. Running node 8.4.

[akb20]

A shot in the dark here, but I had virtually the same errors as you and I fixed it by turning off my VPN.

[jquense]

The issue is tricky because the error here is masking the real error. #2045 fixes this.

[stefanwille]

@markmichon The setup output was edited to be remove unncessary information, and I made an error while doing so. This is my node output:

$ node --version
v8.4.0

[stefanwille]

@akb20 thanks, but for me there is no VPN involved.

[stefanwille]

@jquense yes, thanks. The PR seems to have fixed the source map problem that masked the real problem. I have created another gatsby site from scratch and now I get:

npm run develop

> [email protected] develop /Users/stefan/Projects/React/GatsbyStuff/anotherattempt
> gatsby develop

success delete html files from previous builds — 0.007 s
success open and validate gatsby-config.js — 0.004 s
success copy gatsby files — 0.022 s
success source and transform nodes — 0.029 s
success building schema — 0.086 s
success createLayouts — 0.023 s
success createPages — 0.006 s
success createPagesStatefully — 0.012 s
success extract queries from components — 0.082 s
success run graphql queries — 0.016 s
success write out page data — 0.003 s
success update schema — 0.054 s

info bootstrap finished - 1.831 s

error UNHANDLED REJECTION


  TypeError: formatStaticBuildError is not a function

  - develop.js:34
    [anotherattempt]/[gatsby]/dist/utils/develop.js:34:13

  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1

A console.log() shows that at
anotherattempt/node_modules/gatsby/dist/utils/develop.js:34 the variable formatStaticBuildError has the value undefined.

From searching the Gatsby repo, I see that formatStaticBuildError() is imported in packages/gatsby/src/utils/develop.js:

const { formatStaticBuildError } = require(`../reporter/errors`)

But formatStaticBuildError is not defined or exported anywhere in the repo. Which seems to explain the exception.

[KyleAMathews]

This was fixed in #2073

Thanks for testing and reporting back @stefanwille !

[stefanwille]

Works for me now. Thanks!