Upgrade from Gatsby 2.0.82 to ^2.0.83 breaks Styled Components

shansmith01 commented 5 years ago

When I upgrade to anything above Gatsby 2.0.83 styled components breaks. My site looks ugly and i get the following message

styled-components.browser.esm.js:2309 It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles not rendering properly, errors happening during rehydration process and makes your application bigger without a good reason.

See https://s-c.sh/2BAXzed for more info.

As far as I can see there are no duplicate declarations anywhere

Thanks for the help

Steps to reproduce

run NPM upgrade from 2.8.2 to ^2.83 run gatsby develop Site is broken

Expected result

It should not throw and error and break

Environment

System: OS: macOS 10.14.1 CPU: (4) x64 Intel(R) Core(TM) i7-4558U CPU @ 2.80GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 8.12.0 - /usr/local/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 6.5.0 - /usr/local/bin/npm Languages: Python: 2.7.10 - /usr/bin/python Browsers: Chrome: 71.0.3578.98 Firefox: 63.0.3 Safari: 12.0.1 npmPackages: gatsby: 2.0.83 => 2.0.83 gatsby-image: ^2.0.26 => 2.0.26 gatsby-plugin-canonical-urls: ^2.0.8 => 2.0.8 gatsby-plugin-eslint: ^1.0.3 => 1.0.3 gatsby-plugin-google-tagmanager: ^2.0.7 => 2.0.7 gatsby-plugin-manifest: ^2.0.13 => 2.0.13 gatsby-plugin-netlify: ^2.0.6 => 2.0.6 gatsby-plugin-offline: ^2.0.21 => 2.0.21 gatsby-plugin-react-helmet: ^3.0.5 => 3.0.5 gatsby-plugin-react-svg: ^2.0.0 => 2.0.0 gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0 gatsby-plugin-remove-trailing-slashes: ^2.0.6 => 2.0.6 gatsby-plugin-robots-txt: ^1.3.0 => 1.3.0 gatsby-plugin-sentry: ^0.1.0 => 0.1.0 gatsby-plugin-sharp: ^2.0.17 => 2.0.17 gatsby-plugin-sitemap: ^2.0.4 => 2.0.4 gatsby-plugin-stripe-checkout: ^1.1.2 => 1.1.2 gatsby-plugin-stripe-elements: ^1.0.9 => 1.0.9 gatsby-plugin-styled-components: ^3.0.4 => 3.0.4 gatsby-plugin-subfont: ^1.0.3 => 1.0.3 gatsby-plugin-twitter: ^2.0.8 => 2.0.8 gatsby-source-datocms: ^2.0.1 => 2.0.1 gatsby-source-filesystem: ^2.0.16 => 2.0.16 gatsby-transformer-react-docgen: ^2.1.3 => 2.1.3 gatsby-transformer-remark: ^2.2.0 => 2.2.0 gatsby-transformer-sharp: ^2.1.10 => 2.1.10 npmGlobalPackages: gatsby-cli: 2.4.8

KyleAMathews commented 5 years ago

Could you try removing node_modules and your lock file and reinstalling?

shansmith01 commented 5 years ago

Tried that. No joy sorry. Everything works fine if I step back to 2.8.2 and run npm update

polarathene commented 5 years ago

Do you have reproduction repo? Styled-components seems to be fine for me with 2.0.91.

package.json

 "dependencies": {
    "gatsby": "^2.0.53",
    "gatsby-image": "git+https://github.com/polarathene/forked_packages#placeholder-gatsby-image",
    "styled-components": "^4.1.3",
    "styled-modern-normalize": "^0.2.0",
    "babel-plugin-styled-components": "^1.10.0",
    "gatsby-plugin-styled-components": "^3.0.4",
    "gatsby-plugin-netlify": "^2.0.3",
    "gatsby-plugin-no-sourcemaps": "^2.0.1",
    "gatsby-plugin-sharp": "git+https://github.com/polarathene/forked_packages#placeholder-gatsby-plugin-sharp",
    "gatsby-source-filesystem": "^2.0.16",
    "gatsby-transformer-sharp": "git+https://github.com/polarathene/forked_packages#placeholder-gatsby-transformer-sharp",
    "gatsby-transformer-yaml": "^2.1.4",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "qs": "^6.6.0"
  },

Node 10, Alpine linux(Docker), 2.4.8 gatsby-cli

sidharthachatterjee commented 5 years ago

Sorry you're seeing this @shansmith01

Can you please link to a minimal reproduction repo?

shansmith01 commented 5 years ago

Right found the bug.

I use bitsrc for some of my components. Some of these components were dependent on styled components v3 and I am using v4 in gatsby. This has not been causing a problem pre gatsby 2.0.82.

Removing bitsrc as a dependency seems to have fixed the issue

Thanks for being involved

gatsbyjs / gatsby