Gatsby: Gatsby develop stopped working

[megant]

Description

After a while I cannot use gatsby develop. Script runs successfully, but localhost:8000 shows an empty page only.

Steps to reproduce

I run gatsby develop and the whole process runs successfully, but when I open localhost:8000 in my browser it only shows an empty page.

gatsby build also runs successfully and I'm able to visit the site on localhost:9000

Expected result

gatsby develop regular working

Actual result

No develop page on localhost:8000

Environment

System:
OS: macOS 10.15
CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.13.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 78.0.3904.108
Firefox: 70.0
Safari: 13.0.2
npmPackages:
gatsby: ^2.17.1 => 2.17.1
gatsby-background-image: ^0.4.3 => 0.4.3
gatsby-cli: ^2.8.14 => 2.8.14
gatsby-disable-404: ^0.2.1 => 0.2.1
gatsby-i18n: ^1.1.5 => 1.1.8
gatsby-image: ^2.2.34 => 2.2.34
gatsby-plugin-netlify: ^2.1.27 => 2.1.27
gatsby-plugin-purgecss: ^3.1.1 => 3.1.1
gatsby-plugin-react-helmet: ^3.1.16 => 3.1.16
gatsby-plugin-sass: ^2.1.24 => 2.1.24
gatsby-plugin-sharp: ^2.3.4 => 2.3.4
gatsby-remark-attr: 0.0.2 => 0.0.2
gatsby-remark-copy-linked-files: ^2.1.31 => 2.1.31
gatsby-remark-custom-image-component: ^1.0.0 => 1.0.2
gatsby-remark-external-links: 0.0.4 => 0.0.4
gatsby-remark-images: ^3.1.14 => 3.1.34
gatsby-remark-rehype-images: ^0.1.0 => 0.1.2
gatsby-remark-relative-images: ^0.2.3 => 0.2.3
gatsby-remark-relative-links: 0.0.3 => 0.0.3
gatsby-source-instagram: ^0.5.0 => 0.5.1
gatsby-transformer-remark: ^2.6.38 => 2.6.38
gatsby-transformer-sharp: ^2.3.6 => 2.3.6

[matowang]

Can you inspect element and check the console logs?

[megant]

No elements at all. Does not render anything, just "infite browser loop".

[megant]

How could I debug development phase and webserver?

[afladmark]

I'm not sure if this is related, but I noticed you too have gatsby-plugin-sass. On one of my Gatsby projects, I have two SCSS imports from a node_module package like import 'slick-carousel/slick/slick.scss'. If I remove these two imports my develop mode works just fine, but with them in place I get an infinite loop where the browser warns me the page is making the browser hang. It never, ever, ever returns any visible result. Build works fine, but I cannot use develop with these imports in place. Has been happening for a couple weeks now.

[megant]

@afladmark Good tip. I'm gonna check.

[megant]

Did not work. The last message is written by Gatsby develop is
"success Building development bundle - 29.869s"
which can be found in node_modules/gatsby/dist/commands/develop.js line 165
That's all I can find currently.

node_modules/gatsby/dist/commands/develop.js

[abohannon]

I'm having the same problem. Build works but develop returns blank screen with a websocket warning.

[megant]

localhost:8000/__graphql also works

[megant]

I can add someone to that repo so you can try to gatsby develop that.

[afladmark]

I've finally figured out my issue. I suspect it's different from yours as you don't use gatsby-plugin-react-svg, but maybe it will help someone else or give you some ideas. In my case, I added gatsby-plugin-sass and imported SCSS files from slick-carousel. They include an SVG font which was then getting processed by the SVG plugin. They note in their troubleshooting that the endless spinner can occur if your config is "incorrect".

In my case, I either needed to exclude node_modules or explicitly include my SVG asset folder to get it working. I opted to include the SVG folder in `gatsby-config.js, like so:

    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /\/assets\/svg\//
        }
      }
    },

I hope you manage to find a solution for your issue as well. Maybe something similar is happening with an asset being handled by multiple plugins unexpectedly.

[megant]

@afladmark Thanks for the tip. I dropped out each and every scss, css, etc, but the effect is still the same.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[mtiziano]

@megant how did you solve?

[kkacquah]

I am having this issue now too. Issue arrived, I cloned I ran gatsby new blog gatsby-starter-blog and it still occurs when I run gatsby develop

[lucashfreitas]

Same error here,

After I save gatsby does not reload application properly and hangs at Re-building development bundle.

[iryanrachman]

i got it twice now

[kkacquah]

Seems to be a weird bug, I can't quite understand, for now the work around for me has been closing all windows of the browser I was running develop in opening it again and going to localhost.

[tophat8855]

I was having the same issue, but realized I had another process using port 8000 and when I switched ports for develop, it worked.

[abhisheksaini333]

Hi, I am new to gatsby and just started today. I ran gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world and then I ran gatsby develop. Now it is stuck at success Re-building development bundle - 0.051s.
Can someone help me out.
I tried changing the port using --port but it still the same and the browser is stuck

Update I updated my chrome and it worked

[AlAyoub]

Updating Google Chrome fixed it for me too!