Gatsby: Using Gatsby v2 and styled-components v4 together, extending component styles no longer work

[gi-alec]

Using Gatsby v2 and styled-components v4 together, extending component styles no longer work.
There is a thread open on styled-components spectrum group here.

I noticed the elements in question show a class name (or 2) in the DOM, but the styles for that class are empty.

Gist of the project structure
Gist of the offending code.
Gist of stylesheet comparisons

Steps to reproduce

Create styled component

const Button = styled.button`
border: 1px solid red;
`

Extend component

const Button = styled(Button)`
border: 1px solid green;
`

Expected result

Styles should be appending to the stylesheet output by styled-components

Actual result

Classes for extended components are empty

Environment

System:
OS: macOS High Sierra 10.13.4
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.6.0 - ~/.nvm/versions/node/v10.6.0/bin/node
npm: 6.4.1 - ~/.nvm/versions/node/v10.6.0/bin/npm
Browsers:
Chrome: 69.0.3497.92
Firefox: 61.0.2
Safari: 11.1
npmPackages:
gatsby: ^2.0.0-rc.25 => 2.0.0-rc.25
gatsby-image: ^2.0.0-rc.2 => 2.0.0-rc.2
gatsby-plugin-canonical-urls: ^2.0.0-rc.1 => 2.0.0-rc.1
gatsby-plugin-feed: ^2.0.0-rc.2 => 2.0.0-rc.2
gatsby-plugin-google-analytics: ^2.0.0-rc.2 => 2.0.0-rc.2
gatsby-plugin-google-fonts: 0.0.4 => 0.0.4
gatsby-plugin-manifest: ^2.0.2-rc.1 => 2.0.2-rc.1
gatsby-plugin-netlify: ^2.0.0-rc.6 => 2.0.0-rc.6
gatsby-plugin-nprogress: ^2.0.0-rc.1 => 2.0.0-rc.1
gatsby-plugin-offline: ^2.0.0-rc.8 => 2.0.0-rc.8
gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0-rc.1
gatsby-plugin-sharp: ^2.0.0-rc.7 => 2.0.0-rc.7
gatsby-plugin-sitemap: ^2.0.0-rc.2 => 2.0.0-rc.2
gatsby-plugin-styled-components: ^3.0.0-rc.5 => 3.0.0-rc.5
gatsby-remark-images-contentful: ^2.0.0-rc.6 => 2.0.0-rc.6
gatsby-source-contentful: ^2.0.1-rc.9 => 2.0.1-rc.9
gatsby-source-filesystem: ^2.0.1-rc.6 => 2.0.1-rc.6
gatsby-transformer-remark: ^2.1.1-rc.5 => 2.1.1-rc.5
gatsby-transformer-sharp: ^2.1.1-rc.3 => 2.1.1-rc.3
npmGlobalPackages:
gatsby-cli: 1.1.58

Edit: Here is a minimal repro
https://github.com/gi-alec/gatsby-v2-styled-components-v4

[gi-alec]

Side note. For some reason gatsby is throwing an error if gatsby-link isn't installed, despite being on version 2

[gi-alec]

Hack no longer necessary, update to latest version of styled-components

Issue is resolved using yarn and adding the following to package.json

redacted

I had the same issue in my gatsby project - and it turned out to be related to having an older version of hoist-non-react-statics from the package mdx-js/tag. When I removed that package, extending styled components magically worked again. I manually added [email protected] along with a resolution field in package.json

Credit: Darek Rossman

Still may be worth investigating, so I won't close just yet. The solution isn't exactly intuitive.

[kakadiadarpan]

@gi-alec This solution would work for those who are using yarn, npm users can install npm-force-resolutions and it'll work for them as well.

This should be updated in the docs of gatsby-plugin-styled-components.

[probablyup]

I think I'm just going to inline the functionality into styled-components to get around the problem since multiple people have reported similar bugs.

[kakadiadarpan]

@probablyup solution provided by @gi-alec in this comment https://github.com/gatsbyjs/gatsby/issues/8224#issuecomment-422157559 solves the issue. Can you try using that?

[probablyup]

So I made a PR to hopefully get around this: https://github.com/styled-components/styled-components/pull/2021

You can test it out with

npm install [email protected]

and just remove the resolutions package.json entry beforehand

[smakosh]

Use

<Button as={Button} />

instead of

const Button = styled(Button)`
border: 1px solid green;
`

[kakadiadarpan]

Fixed in styled-components v4.0.0-beta.8