gatsby-plugin-styled-jsx-postcss causes new gatsby version to hang

[edmcman]

Description

When using gatsby-plugin-styled-jsx-postcss and a newer version of gatsbyjs, gatsby gets stuck at "Building development module". This previously worked for gatsby 2.0.75, but now hangs with gatsby 2.19.23.

Steps to reproduce

gatsby new postcss-bug https://github.com/edmcman/gatsby-starter-default
cd postcss-bug
gatsby develop

Expected result

Gatsby starts a development server within a reasonable amount of time (fewer than 5 minutes)

Actual result

Gatsby seems to get stuck forever at "Building development bundle".

Environment

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.8.0 - /opt/local/bin/node
    npm: 6.13.7 - /opt/local/bin/npm
  Languages:
    Python: 3.7.6 - /opt/local/bin/python
  Browsers:
    Chrome: 80.0.3987.122
    Firefox: 57.0.4
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.19.7 => 2.19.23
    gatsby-image: ^2.2.39 => 2.2.41
    gatsby-plugin-manifest: ^2.2.39 => 2.2.42
    gatsby-plugin-offline: ^3.0.32 => 3.0.35
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.22
    gatsby-plugin-sharp: ^2.4.3 => 2.4.5
    gatsby-plugin-styled-jsx: ^3.1.19 => 3.1.19
    gatsby-plugin-styled-jsx-postcss: ^2.0.2 => 2.0.2
    gatsby-source-filesystem: ^2.1.46 => 2.1.48
    gatsby-transformer-sharp: ^2.3.13 => 2.3.16
  npmGlobalPackages:
    gatsby-cli: 2.9.0
    gatsby: 2.0.91

[edmcman]

I have also tried using gatsby-plugin-styled-jsx to load the styled-jsx-postcss plugin without using gatsby-plugin-styled-jsx-postcss, and the same problem occurs. So the problem is not gatsby-plugin-styled-jsx-postcss itself.

[muhajirdev]

I am also having the same problem.

[edmcman]

@muhajirdev I was only using postcss for css nesting. I switched to sass instead, which works fine.

Also, unclear if it's related to this: https://github.com/giuseppeg/styled-jsx-plugin-postcss/issues/32

[mortscode]

Same issue. However, it was working for co-worker who set it up and pushed to repo.

Used NVM to set my node version to v12.8 to match co-worker (was on v12.12) and for some reason it started working.

Switched back to v12.12 and it's still working. 🤷‍♂

[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! 💪💜

[edmcman]

Still an issue. As you can see from the mentioned issue 3 days ago, people are still struggling with this problem.

[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! 💪💜

[edmcman]

Still an issue.

[benrobertsonio]

Sorry for the back and forth with the stale bot! We'll take a look and get an update on this.

[edmcman]

Thanks @benrobertsonio

[markgogo]

It was working fine until I did update to latest version....

Stuck forvever at: Loading plugin from path: styled-jsx-plugin-postcss

$ gatsby develop
success open and validate gatsby-configs - 0.251s
success load plugins - 8.091s
warn The Google Analytics plugin requires a tracking ID. Did you mean to add it?
warn The netlify-cms package is deprecated, please install netlify-cms-app instead. You can do this
success onPreInit - 0.064s
success initialize cache - 0.020s
success copy gatsby files - 0.378s
warn gatsby-plugin-feed was initialized in gatsby-config.js without a title in a feed.
This means that the plugin will use the default feed title, which may not match your use case.
This behavior will be removed in the next major release of gatsby-plugin-feed.
For more info, check out: https://gatsby.dev/adding-rss-feed
success onPreBootstrap - 0.045s
success createSchemaCustomization - 0.377s
success source and transform nodes - 2.604s
success building schema - 0.940s
success createPages - 0.265s
success createPagesStatefully - 0.463s
success onPreExtractQueries - 0.002s
success update schema - 0.148s
success extract queries from components - 2.176s
success write out requires - 0.355s
success write out redirect data - 0.085s
success Build manifest and related icons - 0.009s
success onPostBootstrap - 0.076s
⠀
info bootstrap finished - 30.551 s
⠀
success run queries - 0.251s - 3/3 11.96/s
[styled-jsx] Loading plugin from path: styled-jsx-plugin-postcss

$ gatsby info

System:
OS: Windows 10 10.0.18363
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Binaries:
Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.8.2 - /c/Program/Python38-32/python
Browsers:
Edge: 44.18362.449.0
npmPackages:
gatsby: ^2.21.9 => 2.21.9
gatsby-image: ^2.4.0 => 2.4.0
gatsby-plugin-algolia: ^0.9.0 => 0.9.0
gatsby-plugin-catch-links: ^2.3.0 => 2.3.0
gatsby-plugin-feed: ^2.5.0 => 2.5.0
gatsby-plugin-google-analytics: ^2.3.0 => 2.3.0
gatsby-plugin-layout: ^1.3.0 => 1.3.0
gatsby-plugin-manifest: ^2.4.1 => 2.4.1
gatsby-plugin-netlify: ^2.3.0 => 2.3.0
gatsby-plugin-netlify-cms: ^4.3.0 => 4.3.0
gatsby-plugin-offline: ^3.2.0 => 3.2.0
gatsby-plugin-react-helmet: ^3.3.0 => 3.3.0
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-sharp: ^2.6.0 => 2.6.0
gatsby-plugin-sitemap: ^2.4.1 => 2.4.1
gatsby-plugin-styled-jsx: ^3.3.0 => 3.3.0
gatsby-plugin-styled-jsx-postcss: ^2.0.2 => 2.0.2
gatsby-remark-copy-linked-files: ^2.3.1 => 2.3.1
gatsby-remark-emojis: ^0.4.2 => 0.4.2
gatsby-remark-external-links: 0.0.4 => 0.0.4
gatsby-remark-images: ^3.3.0 => 3.3.0
gatsby-remark-prismjs: ^3.5.0 => 3.5.0
gatsby-remark-responsive-iframe: ^2.4.1 => 2.4.1
gatsby-remark-smartypants: ^2.3.0 => 2.3.0
gatsby-source-filesystem: ^2.3.0 => 2.3.0
gatsby-transformer-remark: ^2.8.4 => 2.8.4
gatsby-transformer-sharp: ^2.5.0 => 2.5.0
npmGlobalPackages:
gatsby-cli: 2.12.7

[pieh]

Hey @edmcman

I tried your reproduction and it's not quite "working" - I do get error:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

/Users/misiek/test/i21885/src/pages/index.js: No PostCSS Config found in: /Users/misiek/test/i21885

File: src/pages/index.js

failed Building development bundle - 5.188s

So seems like there is something missing in your reproduction repository? Could you check it out and possibly update it so we can investigate further?

That said I found multiple other issues (some of those you linked):

• https://github.com/giuseppeg/styled-jsx-plugin-postcss/issues/32 (you linked it already)
• https://github.com/zeit/next.js/issues/12727 (this links to above issue)

So I'm not sure if this is problem with Gatsby or rather upstream one

[pieh]

Hold on - seems like on second run I got into infinite loop thingie - investigating now

[edmcman]

@pieh Great. Let me know if not and I'll see if I can fix the repro.

[pieh]

I'm not sure if this is a reason - but I initially used node 10.16 and then I hit the error, after switching to 13.8 (one that is mentioned in your report) - I instantly hit the problem. Not saying this is where problem is, but it is possible that there is something in dependencies that doesn't quite work in newer node versions

[pieh]

Ok so from my testing - seems like node version is important here:
It seems to "work" (as in not be stuck - it errors out with error I mentioned in https://github.com/gatsbyjs/gatsby/issues/21885#issuecomment-628645322) up to Node 11 (including 11) - but Node 12 and above get stuck in infinite loop.

From checks that I did we are stuck in styled-jsx-plugin-postcss in this place https://github.com/giuseppeg/styled-jsx-plugin-postcss/blob/ec8a46a5909a63b1047111ff0fa7d1bf135f19a2/index.js#L17-L20

(loopWhile never finishes). There might few reasons:

• It is using deasync package which tries to make async work sync (because postcss seems to need sync plugins).
• it's not deasync, but something else that change in Node version and other code relied on some implementation details and timing changed making it to be stuck

I just don't know enough about this stack to understand work that is going under the hood, but this really looks like pure upstream package and should be tracked in styled-jsx-plugin-postcss repository.

I also would like to mention that gatsby-plugin-styled-jsx-postcss is not maintained here - and apparently it's not really maintained at all - it is community plugin and repo for it marks it as legacy:

• old repo https://github.com/escaladesports/legacy-gatsby-plugin-styled-jsx-postcss
• "new repo" https://github.com/escaladesports/escalade/blob/master/legacy/gatsby-plugin-styled-jsx-postcss/README.md

So I would really advise not trying to use this plugin as I found in multiple related packages people mentioning this is not really maintained and things like that. If that's not an option - consider using Node <12 for the projects that need to use this package (i.e. if migration is too costly)

I know this is not great "resolution" for this bug report - but we can't really do anything about it :(

[edmcman]

Well, thanks for confirming that the problem lies in styled-jsx-plugin-postcss. Maybe it makes sense to remove gatsby-plugin-styled-jsx-postcss from the gatsby website?

And similarly warn these starters? (I can do this)

[edmcman]

I filed a bunch of issues. Short of removing the package from the gatsby website, not sure there is much else to be done so I'll close the issue. Thanks for investigating @pieh

[edmcman]

Another issue for the same problem: https://github.com/baobabKoodaa/gatsby-starter-photo-book/issues/4

[anyxem]

I also got that problem and switched back to gatsby-plugin-styled-jsx, no nesting for now