V1.9.18 introduces infinite loop

[Bouncey]

Whilst running 'develop' after updating to 1.9.18 I noticed a greater memory usage. Symptoms were a slower build and a > 500k babel warning about sync-requires, I previously only had the 500k warning for async-requires in build.

Opening the site in my browser displays a blank page with localhost/:1 Uncaught RangeError: Maximum call stack size exceeded in the console.

[Bouncey]

More information on this issue, thanks to @systimotic for investigating (original comment)

Hi everyone! I have a lot of info about this bug, and I think I found the cause:

1. A bit more info about what how this bug shows itself. In development mode, everything is loaded with Javascript. Because the Javascript errors out, you only see a white page. In production, the page is pre-rendered, so you will see the initial page. However, the Javascript errors out, so you won't be able to navigate.
2. This is not a memory related issue. It think it's very likely to be related to different maximum call stack sizes across platforms, but I haven't been able to test this yet. Please ping me on Gitter if you'd like to help out with this.
3. @Bouncey's suggested solution did not work, but he's on the right track.
4. @Esslamb was instrumental in finding the source of this issue. He mentioned on Gitter that commenting out this line took away the error, but it still showed a white screen. I had previously done some profiling tests that showed a lot of React lifecycle methods, and @Esslamb's findings made me realise what was going on.

First of all, here are my findings as to what the maximum call stack size is across browser (testing method from Axel Rauschmayer):

• Windows/Firefox: 12383
• Windows/Chrome: 8973
• Windows/Edge: (can't test in a blank tab, can't get accurate result)

This seems to change with how much memory the tab is already consuming. As you can see, the limit in Chrome is quite a bit lower than in Firefox, which would explain why this ceiling is hit only in Chrome. I;d like to see what the results are on Mac/Chrome or Linux/Chrome.

It seems Gatsby mounts every single article as its own component on page load. My suspicions were confirmed by running a test with the exact same code, but only the Bootstrap articles, without any other articles, and using the original navdata.json, so the navigation was still the same. It ran fine.

Summary

Gatsby creates a component for every single article. Chrome on Windows can't handle this many components being mounted.

Next steps

This error did not exist in older version of Gatsby. My next step is going through older versions that I can get to run and not have this issue. This would be a quick fix. Once that is working, I'll go over to the Gatsby repo to see what can be done about this to fix the recent versions.

We have downgraded to v1.6.6 in the mean time, which works.

[benedfit]

I'm also experiencing the same issues, on the same browsers/devices for https://beta.destinyclanwarfare.com/

Source: https://github.com/avaclancheuk/destiny-clan-warfare

[jp-sauve]

Mint 8.2/Firefox 5.7.01(64bit): 5727
Mint 8.2/Chrome 63.0(64bit): 12584
Mint 8.2/Midori 0.5.11: 43338

[KyleAMathews]

v2 (out in beta) does much better at reducing max memory so closing this now.