Gatsby: Gatsby stuck on generating image thumbnails

Created on 11 Apr 2020  Â·  16Comments  Â·  Source: gatsbyjs/gatsby

Steps to reproduce

  • git clone https://github.com/excalidraw/excalidraw-blog.git
  • cd
  • yarn
  • yarn start

image

Expected result

It finishes and runs

Actual result

It gets stuck, nothing happens

Environment

yarn gatsby info --clipboard
Using globally installed version of Yarn
yarn run v1.12.1
$ /Users/vjeux/random/excalidraw-blog/node_modules/.bin/gatsby info --clipboard

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.5.0 - /var/folders/5g/017j6z2s7cg5g0n630b2hz00nw04y4/T/yarn--1586633275550-0.4174312792538786/node
    Yarn: 1.12.1 - /var/folders/5g/017j6z2s7cg5g0n630b2hz00nw04y4/T/yarn--1586633275550-0.4174312792538786/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v13.5.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 80.0.3987.163
    Safari: 13.1
  npmPackages:
    gatsby: 2.20.2 => 2.20.2
    gatsby-image: 2.3.1 => 2.3.1
    gatsby-plugin-dark-mode: 1.1.1 => 1.1.1
    gatsby-plugin-feed: 2.4.1 => 2.4.1
    gatsby-plugin-google-analytics: 2.2.2 => 2.2.2
    gatsby-plugin-manifest: 2.3.3 => 2.3.3
    gatsby-plugin-offline: 3.1.0 => 3.1.0
    gatsby-plugin-react-helmet: 3.2.1 => 3.2.1
    gatsby-plugin-sharp: 2.5.3 => 2.5.3
    gatsby-plugin-sitemap: 2.3.1 => 2.3.1
    gatsby-plugin-twitter: 2.2.1 => 2.2.1
    gatsby-plugin-typography: 2.4.1 => 2.4.1
    gatsby-plugin-zeit-now: 0.2.0 => 0.2.0
    gatsby-remark-copy-linked-files: 2.2.1 => 2.2.1
    gatsby-remark-embedder: 1.16.0 => 1.16.0
    gatsby-remark-images: 3.2.1 => 3.2.1
    gatsby-remark-prismjs: 3.4.1 => 3.4.1
    gatsby-remark-responsive-iframe: 2.3.1 => 2.3.1
    gatsby-remark-smartypants: 2.2.1 => 2.2.1
    gatsby-source-filesystem: 2.2.2 => 2.2.2
    gatsby-transformer-remark: 2.7.1 => 2.7.1
    gatsby-transformer-sharp: 2.4.3 => 2.4.3

✨  Done in 1.44s.
bug
Source
picture vjeux

Most helpful comment

Hi everyone. Any fix on this? I am on 

System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.2 - /var/folders/5p/990_5m894_bdtrvqv_k81lm80000gn/T/yarn--1587757217559-0.17412205041655793/node
    Yarn: 1.22.4 - /var/folders/5p/990_5m894_bdtrvqv_k81lm80000gn/T/yarn--1587757217559-0.17412205041655793/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Languages:
    Python: 3.7.7 - /Users/ayo/anaconda3/bin/python
  Browsers:
    Chrome: 81.0.4044.122
    Firefox: 74.0
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.19.5 => 2.20.31
    gatsby-image: ^2.2.43 => 2.3.2
    gatsby-plugin-emotion: ^4.1.25 => 4.2.1
    gatsby-plugin-instagram-embed: ^2.0.1 => 2.0.1
    gatsby-plugin-mailchimp: ^5.1.2 => 5.1.2
    gatsby-plugin-manifest: ^2.2.47 => 2.3.3
    gatsby-plugin-netlify-cms: ^4.1.42 => 4.2.2
    gatsby-plugin-netlify-functions: ^0.0.3 => 0.0.3
    gatsby-plugin-offline: ^3.0.40 => 3.1.2
    gatsby-plugin-postcss: ^2.1.22 => 2.2.1
    gatsby-plugin-purgecss: ^4.0.1 => 4.0.1
    gatsby-plugin-react-helmet: ^3.1.23 => 3.2.1
    gatsby-plugin-recaptcha: ^1.0.5 => 1.0.5
    gatsby-plugin-sass: ^2.1.31 => 2.2.1
    gatsby-plugin-sharp: ^2.4.0 => 2.5.7
    gatsby-plugin-sitemap: ^2.3.3 => 2.3.3
    gatsby-plugin-smoothscroll: ^1.1.0 => 1.1.0
    gatsby-plugin-twitter: ^2.2.4 => 2.2.4
    gatsby-remark-embedder: ^2.0.0 => 2.0.0
    gatsby-remark-images: ^3.1.50 => 3.2.2
    gatsby-remark-images-contentful: ^2.2.4 => 2.2.4
    gatsby-remark-instagram-embed: ^1.0.0 => 1.0.0
    gatsby-source-contentful: ^2.1.98 => 2.2.7
    gatsby-source-filesystem: ^2.1.55 => 2.2.2
    gatsby-transformer-remark: ^2.6.59 => 2.7.1
    gatsby-transformer-sharp: ^2.3.18 => 2.4.4
  npmGlobalPackages:
    gatsby-cli: 2.11.14

I am unable to build locally. Gets stuck for minutes on

[==============              ]   33.265 s 37/72 51% run queries
[=======                    ]   33.246 s108/436 25% Generating image thumbn…

If I downgrade, it works on [email protected]

picture adesugbaa on 24 Apr 2020
👍2

All 16 comments

👋 Chris!

Reproduced this on Node 12.

Do you know when this started happening?

KyleAMathews picture KyleAMathews on 12 Apr 2020

No, but I guess you could bisect on the repo, there are not a lot of commits

vjeux picture vjeux on 12 Apr 2020
👍1

Investigated some more and it has something to do with querying markdown — in graphiql you can query other markdown fields but if you touch anything that goes through the markdown processing steps, it stalls. I commented out gatsby-remark-embedder and it worked so investigating that.

KyleAMathews picture KyleAMathews on 12 Apr 2020

Thought for @gatsbyjs/core — we should set a timeout on the query queue as in then tells you which query is stalling & it's a better experience for the user as things aren't just mysteriously frozen. At least they can pinpoint it's query running & a particular query.

KyleAMathews picture KyleAMathews on 12 Apr 2020

Ah gatsby-remark-embedder is swallowing errors

KyleAMathews picture KyleAMathews on 12 Apr 2020
👍1

or actually... they turn every line into a URL & see if it validates 🤔

KyleAMathews picture KyleAMathews on 12 Apr 2020
😕1

Ok, it looks like your custom embedder isn't responding for some reason.

KyleAMathews picture KyleAMathews on 12 Apr 2020

I'll PR up a query timeout so that'd be more obvious in the future.

KyleAMathews picture KyleAMathews on 12 Apr 2020

Thanks, I was able to send a fix that doesn't swallow the error in a promise and gets it unblocked! https://github.com/excalidraw/excalidraw-blog/pull/68

Now I need to figure out why it's not working anymore :P

vjeux picture vjeux on 13 Apr 2020

@MichaelDeBoey it might make sense to add an automatic warning if an embed call takes more than e.g. 5 seconds as other services could occasionally hang and people wouldn't easily know what happened in their build.

KyleAMathews picture KyleAMathews on 13 Apr 2020
👍1

they turn every line into a URL & see if it validates 🤔

The plugin is checking every link that’s on a saparate line if it needs to be transformed or not.
If so, it creates the proper embed code.

it might make sense to add an automatic warning if an embed call takes more than e.g. 5 seconds as other services could occasionally hang and people wouldn't easily know what happened in their build.

@KyleAMathews I’m happy to merge a PR if you want to add this feature to the plugin 🙂

MichaelDeBoey picture MichaelDeBoey on 13 Apr 2020

Hi everyone. Any fix on this? I am on 

System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.2 - /var/folders/5p/990_5m894_bdtrvqv_k81lm80000gn/T/yarn--1587757217559-0.17412205041655793/node
    Yarn: 1.22.4 - /var/folders/5p/990_5m894_bdtrvqv_k81lm80000gn/T/yarn--1587757217559-0.17412205041655793/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Languages:
    Python: 3.7.7 - /Users/ayo/anaconda3/bin/python
  Browsers:
    Chrome: 81.0.4044.122
    Firefox: 74.0
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.19.5 => 2.20.31
    gatsby-image: ^2.2.43 => 2.3.2
    gatsby-plugin-emotion: ^4.1.25 => 4.2.1
    gatsby-plugin-instagram-embed: ^2.0.1 => 2.0.1
    gatsby-plugin-mailchimp: ^5.1.2 => 5.1.2
    gatsby-plugin-manifest: ^2.2.47 => 2.3.3
    gatsby-plugin-netlify-cms: ^4.1.42 => 4.2.2
    gatsby-plugin-netlify-functions: ^0.0.3 => 0.0.3
    gatsby-plugin-offline: ^3.0.40 => 3.1.2
    gatsby-plugin-postcss: ^2.1.22 => 2.2.1
    gatsby-plugin-purgecss: ^4.0.1 => 4.0.1
    gatsby-plugin-react-helmet: ^3.1.23 => 3.2.1
    gatsby-plugin-recaptcha: ^1.0.5 => 1.0.5
    gatsby-plugin-sass: ^2.1.31 => 2.2.1
    gatsby-plugin-sharp: ^2.4.0 => 2.5.7
    gatsby-plugin-sitemap: ^2.3.3 => 2.3.3
    gatsby-plugin-smoothscroll: ^1.1.0 => 1.1.0
    gatsby-plugin-twitter: ^2.2.4 => 2.2.4
    gatsby-remark-embedder: ^2.0.0 => 2.0.0
    gatsby-remark-images: ^3.1.50 => 3.2.2
    gatsby-remark-images-contentful: ^2.2.4 => 2.2.4
    gatsby-remark-instagram-embed: ^1.0.0 => 1.0.0
    gatsby-source-contentful: ^2.1.98 => 2.2.7
    gatsby-source-filesystem: ^2.1.55 => 2.2.2
    gatsby-transformer-remark: ^2.6.59 => 2.7.1
    gatsby-transformer-sharp: ^2.3.18 => 2.4.4
  npmGlobalPackages:
    gatsby-cli: 2.11.14

I am unable to build locally. Gets stuck for minutes on

[==============              ]   33.265 s 37/72 51% run queries
[=======                    ]   33.246 s108/436 25% Generating image thumbn…

If I downgrade, it works on [email protected]

adesugbaa picture adesugbaa on 24 Apr 2020
👍2

Strangely, I'm having this "problem" except gatsby develop does not actually seem stuck, it just keeps saying it's generating thumbnails at 100% completion but everything seems to be working -- hot updates etc. I haven't tried serve. I don't know how to dump environment info like @adesugbaa.

asktree picture asktree on 28 May 2020

Same problem on gatsby develop
[============================] 342.219 s 17/17 100% Generating image thumbnails

System:
    OS: Linux 4.15 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (2) x64 Intel(R) Xeon(R) CPU E5-2630L v2 @ 2.40GHz
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 12.18.3 - /usr/bin/node
    npm: 6.14.8 - /usr/bin/npm
  Languages:
    Python: 2.7.17 - /usr/bin/python
  npmGlobalPackages:
    gatsby-cli: 2.12.87
goldenmaya picture goldenmaya on 21 Aug 2020

Same issue on 2.12.88.

success write out requires - 0.140s
success run static queries - 0.157s - 1/1 6.36/s
warn code block or inline code language not specified in markdown. applying generic code block
success run page queries - 2.115s - 27/27 12.76/s
[============================]   13.958 s 533/534 100% Generating image thumbnails
mvdobrinin picture mvdobrinin on 26 Aug 2020

+1 CLI version 2.12.109, always gets stuck at 100%. Oddly, if I hit Ctrl+C when it hangs and then rerun gatsby build/gatsby develop, the second run completes pretty much instantly (~30 seconds). The bug(?) caused my last remote deploy to take 14 minutes, but locally, I can get it to complete in under 2 minutes if I Ctrl+C and restart.

Any insight into what's going on...? --verbose doesn't say anything about the thumbnail-generation process.

Here's my gatsby info:

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
  Binaries:
    Node: 14.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.16
  Browsers:
    Chrome: 86.0.4240.75
    Edge: Spartan (44.19041.423.0), Chromium (86.0.622.43)
  npmPackages:
    gatsby: ^2.24.80 => 2.24.80 
    gatsby-disable-404: ^0.2.1 => 0.2.1 
    gatsby-image: ^2.4.8 => 2.4.8 
    gatsby-plugin-ffmpeg: ^0.3.1 => 0.3.1 
    gatsby-plugin-manifest: ^2.4.13 => 2.4.13 
    gatsby-plugin-mdx: ^1.2.46 => 1.2.46 
    gatsby-plugin-offline: ^3.2.12 => 3.2.12 
    gatsby-plugin-react-helmet: ^3.3.5 => 3.3.5 
    gatsby-plugin-remove-trailing-slashes: ^2.3.9 => 2.3.9 
    gatsby-plugin-sass: ^2.3.6 => 2.3.6 
    gatsby-plugin-sharp: ^2.6.36 => 2.6.36 
    gatsby-plugin-styled-components: ^3.3.11 => 3.3.11 
    gatsby-source-filesystem: ^2.3.13 => 2.3.13 
    gatsby-transformer-ffmpeg: ^0.3.8 => 0.3.8 
    gatsby-transformer-mdx: ^1.2.0 => 1.2.0 
    gatsby-transformer-sharp: ^2.5.7 => 2.5.7 
    gatsby-video: ^0.2.0 => 0.2.0 
  npmGlobalPackages:
    gatsby-cli: 2.12.109
supposedly picture supposedly on 18 Oct 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jimfilippou picture jimfilippou  Â·  3Comments
benstr picture benstr  Â·  3Comments
andykais picture andykais  Â·  3Comments
Oppenheimer1 picture Oppenheimer1  Â·  3Comments
dustinhorton picture dustinhorton  Â·  3Comments