babel-plugin-styled-components: Next.js app stuck on "compiling" with version >= 1.10.3

Our Next.js app is https://github.com/opencollective/opencollective-frontend/

When upgrading to a version >= 1.10.3 of babel-plugin-styled-components, our dev environment is unusable, the app is stuck on “compiling …”.

We had to downgrade to version 1.10.2: https://github.com/opencollective/opencollective-frontend/pull/2044

To reproduce:

  • git clone git@github.com:opencollective/opencollective-frontend.git
  • cd opencollective-frontend
  • npm install
  • npm install babel-plugin-styled-components@1.10.3 --save-exact
  • npm run dev
  • Go to: http://localhost:3000/

Current behavior:

  • app is stuck on “compiling …”
  • can’t load any page.

Expected behavior:

  • app succeeds compiling
  • can load any page

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 19 (2 by maintainers)

Commits related to this issue

Most upvoted comments

Oh, oh, shame on me. I missed the babel cache in ./node_module/.cache/… 😦 I’m looking into it…

Edit:: So, it looks like importLocalName returns false for all calls in this file: https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/utils/detectors.js#L69 and https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/utils/detectors.js#L93-L104

@znarf @probablyup ~this change causes our builds to get stuck: https://github.com/styled-components/babel-plugin-styled-components/pull/230/files#diff-09a7c7a1456b228d86909e9c7f46ec3f When I revert just that one line, everything works as it was before.~

Edit: Ah, I found it: Here we try to access importName.name: https://github.com/styled-components/babel-plugin-styled-components/pull/230/files#diff-6834cbe885e4faffa7e63e5846c6a8eeR32 But only a few lines later, we make sure, that importName is actually an identifier: https://github.com/styled-components/babel-plugin-styled-components/pull/230/files#diff-6834cbe885e4faffa7e63e5846c6a8eeR40

Also: With this new change, the variable importName can now be: a string or false or a @babel/types node (apparently either a t.identifier, a t.memberExpression or t.sequenceExpression?) which feels overly complex…

I tested 1.10.6and it’s fixing the original issue.