Depending on the Gatsby version, the Netlify CLI UI breaks (long standing issue)

Description

I’ve been having this UI issue for so long now, I posted the issue in Netlify’s CLI github issues list as well. Please close if this feels unrelated to Gatsby, and is solely Netlify’s problem to fix.

Issue: The Netlify CLI UI get’s cut off by an “In Progress” bar that just sits there even though it’s completed, cutting off the green “Server now ready on localhost:8888” section.

This issue doesn’t happen when running the gatsby develop command, but does happen when running netlify dev, which in turn runs gatsby develop. I’m posting here in case anyone here might have some insights into the UI issue based on the two versions of Gatsby I outline below.

I decided to get to the bottom of it and figure out when this this issue starts… It doesn’t happen on gatsby@2.15.17, but it does happen on gatsby@2.16.0 and later. But gatsby@2.16.0 is the very specific moment things break.

---

Here’s a screenshot on gatsby@2.15.17, running netlify dev when things look normal:

Here’s a screenshot on gatsby@2.16.0, running netlify dev when things look broken:

---

Environment

  System:
    OS: macOS 10.15.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.6.0 - ~/.nvm/versions/node/v13.6.0/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v13.6.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.130
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.16.0 => 2.16.0
    gatsby-plugin-catch-links: ^2.1.25 => 2.1.25
    gatsby-plugin-manifest: ^2.2.41 => 2.2.41
    gatsby-plugin-offline: ^3.0.34 => 3.0.34
    gatsby-plugin-react-helmet: ^3.1.22 => 3.1.22
    gatsby-plugin-sass: ^2.1.28 => 2.1.28
    gatsby-plugin-sharp: ^2.4.5 => 2.4.5
    gatsby-remark-images: ^3.1.44 => 3.1.44
    gatsby-remark-relative-images: ^0.2.3 => 0.2.3
    gatsby-source-contentful: ^2.1.85 => 2.1.85
    gatsby-source-filesystem: ^2.1.48 => 2.1.48
    gatsby-transformer-remark: ^2.6.50 => 2.6.50
    gatsby-transformer-sharp: ^2.3.14 => 2.3.14
  npmGlobalPackages:
    gatsby-cli: 2.8.27

Gatsby CLI version: 2.8.27
Gatsby version: 2.16.0
  Note: this is the Gatsby version for the site at: /Users/tris/Sites/tris/tris-gatsby

netlify-cli/2.31.0 darwin-x64 node-v13.6.0

[erquhart]

A bit of research:

• this bug of Gatsby cli eating previous external logs was introduced in https://github.com/gatsbyjs/gatsby/pull/14973 (cc/ @pieh)
• it might be due to this component, not positive
• is definitely related to ink, either the library itself or Gatsby’s implementation of it
• may also be related to #19314
• setting GATSBY_LOGGER to yurnalist, as suggested in #19314 by @jlengstorf, is an effective workaround (not a solution, though)

[jlengstorf]

I posted this on https://github.com/netlify/cli/issues/698 as well, but just to surface this in both places:

this is happening on the repo I’m using for my Frontend Masters “Introduction to the JAMstack” course, which is scheduled to be released soon

if we could get this fixed before that goes live, that would probably help us avoid a lot of confusion