styled-components: Several instances of 'styled-components' error when upgrading to v4 beta 1

Environment

System:

OS: macOS High Sierra 10.13.6
CPU: x64 Intel® Core™ i5-3470 CPU @ 3.20GHz
Memory: 23.36 MB / 8.00 GB
Shell: 5.3 - /bin/zsh

Binaries:

Node: 10.2.1 - ~/.nvm/versions/node/v10.2.1/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v10.2.1/bin/npm

npmPackages:

babel-plugin-styled-components: ^1.5.1 => 1.6.3
styled-components: ^4.0.0-beta.1 => 4.0.0-beta.1

Steps taken

I’m using styled-components to design a Gatsby site. I just updated to v4 beta 1, followed the migration guide (which was surprisingly easy) and ran gatsby develop. It compiled just fine. However, opening the site in a browser produces only a blank page with the console complaining:

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.

I read through the suggestions at the above address. However, only

You have another styled-components library somewhere in your dependencies

might apply in my case and running yarn list styled-components returns

styled-components@4.0.0-beta.1

Any other ideas what might be causing this issue? Could the warning

warning " > styled-icons@2.4.0" has incorrect peer dependency "styled-components@>=3 <4".

I received when clean installing all node modules have anything to do with it?

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (12 by maintainers)

Most upvoted comments

Not works for me. Have the same warning. Here is my demo: https://github.com/azat-io/react-router-dom-demo/blob/master/App.js

azat-io on Sep 22, 2018

Alright everyone, go ahead and upgrade your babel plugins to latest (1.6.4) and the error should go away. We decided to remove the no-tags functionality because of this sort of edge case and also because react-dom ships these strings anyway, so ultimately there is no useful bundle savings.

quantizor on Sep 7, 2018

In general please don’t use versions that aren’t tagged as “beta” because they are not guaranteed to work. Always use yarn upgrade styled-components@beta vs a specific version to make sure you’re getting the right thing.

quantizor on Sep 7, 2018

Tried adding

  "resolutions": {
    "styled-components": "^4.0.0-beta.1"
  }

to my package.json followed by re-running yarn install but no change.

janosh on Sep 7, 2018