Gatsby: TypeScript sites break with [email protected]

[ryanditjia]

Description

Something changed between 2.9.8 and 2.9.9 that breaks Gatsby sites with TypeScript. Problem doesn’t seem to have to do with gatsby-plugin-typescript, but more to do with Gatsby looking for an index.js. But please take that observation with a grain of salt.

Steps to reproduce

Clone this minimal repo: https://github.com/ryanditjia/gatsby2.9.9-issue.git

Run npm start

Expected result

Develop should run fine.

Actual result

Getting this error:

project_root/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

RangeError: Maximum call stack size exceeded
    at Array.values (<anonymous>)
    at Object.console.error
... and so on

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-2400S CPU @ 2.50GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.4.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/local/bin/python
Browsers:
Chrome: 74.0.3729.169
Firefox: 60.0.2
Safari: 12.1.1
npmPackages:
gatsby: ^2.9.9 => 2.9.9
gatsby-plugin-typescript: ^2.0.15 => 2.0.15

[IngoValente]

Same here, reverting back to 2.9.8 works without problems.

[chrsep]

Same here, this happens to me only on gatsby develop, not on gatsby build. I think this might have something to do with the introduction of the status bar a0353be34b53eec7263c236256bfa9ca164fa7cf? Crash seems to be coming from GatsbyReporter.

[iAdramelk]

Same for me. Reverting to 2.9.8 fixed issue.

MacOS 10.14.5 (18F132), node 12.4.0.

[KyleAMathews]

Hmm will look soon. I started a (non typescript) site and it worked correctly. Are the rest of you using typescript as well?

[KyleAMathews]

2.9.9 was the release with the status bar.

[chrsep]

Yes, i am on typescript as well.

[iAdramelk]

Typescript, yes.

[wardpeet]

@ryanditjia thanks for the repro. Currently testing it out with the following fix:
npm install gatsby@process-develop

[n8tb1t]

I'm having the same error, though, I'm not using typescript

[n8tb1t]

Installing the gatsby@process-develop seems to fix the bug.
Though, it looks kind of ugly on windows powershell console.

Can you explain a little about the bug source.

[wardpeet]

We forgot to add import fetch from "node-fetch" on the file where we were using fetch. node-fetch adds fetch to the global namespace so you should only import it once. While testing it on a repo where a plugin was also initiating node-fetch it gave no problem.

Projects without any plugins using node-fetch break.

[wardpeet]

@n8tb1t can you define ugly? 😛

[n8tb1t]

@n8tb1t can you define ugly? 😛

Yes, exactly like this. The horizontal line takes too much space, and the project name breaks at the end.
I noticed it has some kind of prompt, what it can be used for?
:)

[sidharthachatterjee]

Fixed and published in [email protected]

Thank you for opening this @ryanditjia and fixing this @wardpeet 🙌

[dennisroethig]

Hm, I'm still getting this on gatsby serve 😕

> gatsby serve

/Users/dennisroethig/Projects/gatsby-per-locale/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

RangeError: Maximum call stack size exceeded
    at Array Iterator.next (<anonymous>)
    at Object.console.error (/Users/dennisroethig/Projects/gatsby-per-locale/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/index.js:265:48)
    at warningWithoutStack (/Users/dennisroethig/Projects/gatsby-per-locale/node_modules/react-reconciler/cjs/react-reconciler.development.js:100:32)
    at warnAboutUpdateOnUnmounted (/Users/dennisroethig/Projects/gatsby-per-locale/node_modules/react-reconciler/cjs/react-reconciler.development.js:10458:5)
    at scheduleWork (/Users/dennisroethig/Projects/gatsby-per-locale/node_modules/react-reconciler/cjs/react-reconciler.development.js:11868:11)
    at Object.enqueueSetState (/Users/dennisroethig/Projects/gatsby-per-locale/node_modules/react-reconciler/cjs/react-reconciler.development.js:3152:5)
    at GatsbyReporter.Component.setState (/Users/dennisroethig/Projects/gatsby-per-locale/node_modules/react/cjs/react.development.js:325:16)
    at GatsbyReporter._addMessage (/Users/dennisroethig/Projects/gatsby-per-locale/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/reporters/ink/reporter.js:140:10)
    at Object.console.error (/Users/dennisroethig/Projects/gatsby-per-locale/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/index.js:265:39)
    at warningWithoutStack (/Users/dennisroethig/Projects/gatsby-per-locale/node_modules/react-reconciler/cjs/react-reconciler.development.js:100:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 7
npm ERR! [email protected] serve: `gatsby serve`
npm ERR! Exit status 7
npm ERR! 
npm ERR! Failed at the [email protected] serve 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:

After looking through the internet I ended up updating all the things without success. Any info I can provide that would help?

[dandv]

I'm on Gatsby 2.22.13 and get this cryptic error,

/sandbox/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: write EPIPE

Here's the Code Sandbox.

[sidharthachatterjee]

@dandv This issue is likely unrelated. The unfortunate fact here is the cryptic error message (which is internal and conceals the real error 😞)

Apologies for the confusion. I'll go ahead and close this issue again. (By the way your Sandbox seems to work fine)

If you're still seeing this issue, a new issue with a reproduction would be helpful!