Add support for styled-components v4 #7897

kripod · 2018-09-05T13:32:24Z

Summary

I tried to update a project to styled-components@next, but exceptions get thrown during gatsby develop.

The text was updated successfully, but these errors were encountered:

DSchau · 2018-09-05T15:09:54Z

@kripod could you share what those errors are?

Also most helpful is a repo demonstrating the issue, so we can check it out ourselves :)

(Also way to be on the bleeding edge 👍 I just saw the announcement, ha!)

kripod · 2018-09-05T15:14:14Z

@DSchau Unfortunately, I didn’t copy the error message. However, even after disabling gatsby-plugin-styled-components@next, the same error was thrown (by gatsby-ssr if I remember correctly, something like the property “target” cannot be found on a styled component).

kakadiadarpan · 2018-09-06T06:39:32Z

Hi @kripod, like @DSchau suggested it would be great if you can provide a demo project. That makes your issue much easier to diagnose.

amankkg · 2018-09-07T20:47:10Z

I have an issue with v4 createGlobalStyle, which is a replacement for injectGlobal. Here is my example with latest sc and gatsby. Global style component is rendered in layout component. The warning says next:

The global style component sc-global-3629742163 was composed and rendered multiple times in your React component tree. Only the last-rendered copy will have its styles remain in < head >.

This warning pops up only on (every) navigation, e.g. on initial render it is OK. ~~But, once this warning appears the global styles become broken.~~
Update: wrapped my global styles with ThemeProvider. Now global styles don't break on navigation, while warnings still persit.

tricoder42 · 2018-09-07T23:46:13Z

~~I've just tried styled-components v4 with Gatsby v2. In develop everything works fine, but after build the styles are missing completely. No error in console.~~

~~Here's the repository.~~

~~I've downgraded to styled-components v3 and it works.~~

Edit: After I fixed flickering css styles with font-awesome and the site was stable, I upgraded styled-components to v4 again... and this time it works without any problem. It's really strange, there's not much difference from what I did now and before. Here's the diff. The only notable things are updated babel plugin and moved font-awesome styles to createGlobalStyle. Not sure if my problem was related to this issue, probably not.

Long story short: This repo uses Gatsby v2 with styled-components v4

@kripod Just to clarify: It's styled-components@beta, not styled-components@next. next points to older v3 version.

garetmckinley · 2018-09-08T20:53:13Z

Having the same problem, so I created a repo for it here

The error I'm seeing is:

Unhandled promise rejection TypeError: "React.createContext is not a function"
	js http://localhost:8000/commons.js:48548:21
	js http://localhost:8000/commons.js:47172:30
	__webpack_require__ http://localhost:8000/commons.js:556:12
	fn http://localhost:8000/commons.js:87:20
	js http://localhost:8000/commons.js:2647:26
	__webpack_require__ http://localhost:8000/commons.js:556:12
	fn http://localhost:8000/commons.js:87:20
	js http://localhost:8000/commons.js:1602:15
	__webpack_require__ http://localhost:8000/commons.js:556:12
	fn http://localhost:8000/commons.js:87:20
	js http://localhost:8000/commons.js:2503:36
	__webpack_require__ http://localhost:8000/commons.js:556:12
	fn http://localhost:8000/commons.js:87:20
	js http://localhost:8000/commons.js:2166:22
	__webpack_require__ http://localhost:8000/commons.js:556:12
	fn http://localhost:8000/commons.js:87:20
	js http://localhost:8000/commons.js:946:15
	run http://localhost:8000/commons.js:5674:23
	notify http://localhost:8000/commons.js:5691:31
	flush http://localhost:8000/commons.js:5134:10

The exact same repo works fine if you install v3.

tricoder42 · 2018-09-08T21:06:03Z

You have Gatsby 1.x which uses older React. You need to use Gatsby 2.x which uses latest React. I don’t think it’s possible to upgrade React in Gatsby without version bump, it’s a breaking change.

…

On 8 Sep 2018, at 22:53, Garet McKinley ***@***.***> wrote: Having the same problem, so I created a repo for it here The error I'm seeing is: Unhandled promise rejection TypeError: "React.createContext is not a function" js http://localhost:8000/commons.js:48548:21 js http://localhost:8000/commons.js:47172:30 __webpack_require__ http://localhost:8000/commons.js:556:12 fn http://localhost:8000/commons.js:87:20 js http://localhost:8000/commons.js:2647:26 __webpack_require__ http://localhost:8000/commons.js:556:12 fn http://localhost:8000/commons.js:87:20 js http://localhost:8000/commons.js:1602:15 __webpack_require__ http://localhost:8000/commons.js:556:12 fn http://localhost:8000/commons.js:87:20 js http://localhost:8000/commons.js:2503:36 __webpack_require__ http://localhost:8000/commons.js:556:12 fn http://localhost:8000/commons.js:87:20 js http://localhost:8000/commons.js:2166:22 __webpack_require__ http://localhost:8000/commons.js:556:12 fn http://localhost:8000/commons.js:87:20 js http://localhost:8000/commons.js:946:15 run http://localhost:8000/commons.js:5674:23 notify http://localhost:8000/commons.js:5691:31 flush http://localhost:8000/commons.js:5134:10 The exact same repo works fine if you install v3. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

garetmckinley · 2018-09-08T21:07:58Z

Woah, that's odd. I swear I had Gatsby v2 installed globally, I'll reinitialize my project and report back.

KyleAMathews · 2018-09-08T21:09:35Z

gatsby-cli isn't the same thing as gatsby. The CLI just runs whatever version of gatsby you have installed in your project.

garetmckinley · 2018-09-08T21:25:58Z

Ah I see, I missed the line in the readme that mentions using the https://github.com/gatsbyjs/gatsby-starter-default#v2 starter 🤦‍♂️ I just assumed that installing v2 of the cli would automatically initialize projects as v2.

Ok, so my project is up and running with v2 now and everything seems to work perfectly fine, along with the plugins for SSR. I updated the repo here if maybe @kripod wants to review it to compare and see why his project wasn't working.

But from what I can tell, styled-components v4 seems to be a non-issue, phew! 😸

amankkg · 2018-09-09T12:59:57Z

Thanks to @tricoder42 and @garetmckinley for examples, I've updated and fixed my own example and it seems like there are no errors or malfunctions so far, only that warning in dev mode. Global styles are working even on navigation.

@tricoder42 seems like your example has only one page and if you add another one the warning may occur.
@garetmckinley your example has navigation issue: once navigated to page 2 global styles seem to be broken and dev warning persists.

garetmckinley · 2018-09-09T20:14:35Z

Yup, I can confirm that what @amankkg said regarding global styles is happening, even when deployed.

I created a repo for my new blog here, and I deployed the static site to gh pages here. I have the prism syntax styles in my global styles and when you navigate to a post, the syntax theme does not appear. As soon as you reload the page on the post, the syntax theme shows up.

I'm going to add in SSR support to my blog and deploy it to my server to see if the styles persist that way. But as it looks now, global styles are broken when routing on static deployments.

edit: the same thing is also happening when the page is reloaded via HMR. As soon as a file is saved, the global styles disappear, and this warning appears:

The global style component sc-global-121403002 was composed and rendered multiple times in your React component tree. Only the last-rendered copy will have its styles remain in <head>.

probablyup · 2018-09-09T21:36:03Z

I've been looking into this and I think it's because upon switching pages the previous instance doesn't get unmounted until after the next one has been rendered. I think I'll make a change to when this warning is triggered because we just don't want concurrent renders happening.

probablyup · 2018-09-10T17:01:21Z

Update your babel plugin please

…

On Mon, Sep 10, 2018 at 10:33 AM gi-alec ***@***.***> wrote: Getting an error in every location I import styled-components: Module not found: Error: Can't resolve 'styled-components/no-tags' Sure enough, checking node_modules/styled-components/no-tags/dist, the folder is empty. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#7897 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiy1qgjd_OJp6_Z4ftacuy-nLMJYwGDks5uZoZOgaJpZM4Wa6sG> .

fabe · 2018-09-10T19:02:06Z

Rendering the globalStyle component inside gatsby-browser.js and gatsby-ssr.js gets rid of the warning when switching pages, but it persists on HMR (fabe/gatsby-universal@26a483b).

amankkg · 2018-09-10T19:22:57Z

On styled-components@4.0.0-beta.2-0 there are no warnings on navigation nor HMR.

probablyup · 2018-09-10T19:43:45Z

Yeah I haven’t cut a .3 formal beta release yet. Probably later today. Any time you see a version number ending in "-number" that usually means it's a development build for testing and not an official release or beta release.

probablyup · 2018-09-10T21:01:55Z

v4.0.0-beta.3 is out which includes the dev warning fix

probablyup · 2018-09-10T21:04:54Z

General note: styled-components@next was an old tag we used for the v2 beta and release. I removed it last night so people won't get confused. Should use @beta for v4.

garetmckinley · 2018-09-10T21:57:30Z

Yup, latest versions are working great for me! No issues with global styles disappearing during hmr or routing changes. Nicely done @probablyup

amankkg · 2018-09-11T21:25:10Z

I wonder if this issue with styled-components/no-tags being not found is coming with v4 only?

In my case having babel-plugin-styled-components@1.6.4 in plain dependencies would break gatsby build command with that error.

A solution for this is (from a neighbor thread) just to move that babel plugin to devDependencies. And, IMO, this is "idiomatic" also 😃

If so, should we mention that in Gatsby tutorial? For now, there is a recommendation to install it as a plain dependency.

probablyup · 2018-09-11T21:27:55Z

@amankkg update your babel plugin - if you're seeing that issue, you're not using 1.6.4... or possibly using a library that transpiled with an earlier version of the plugin?

amankkg · 2018-09-11T21:35:54Z

@probablyup I'm on 1.6.4. Error disappeared only after moving this babel plugin to devDependencies. I just followed this styled-components/styled-components#1969 (comment)

If this is expected behavior we have to update the Gatsby's SC tutorial.

Update:

or possibly using a library that transpiled with an earlier version of the plugin?

I don't think so, here is my setup

garetmckinley · 2018-09-15T18:38:02Z

Ok so I just ran into another issue when dealing with global styles. It seems like there is a FOUC that is happening on just the global styles.

I'm using:

styled-components@4.0.0-beta.5
gatsby-plugin-styled-components@3.0.0-rc.1

Here's what the issue looks like: https://imgur.com/a/ublAN8R (ignore the gray flickering in the beginning, video encoding issue) [edit: the font flickering is just because it's throttled heavily and the external fonts are loaded very slowly]

I throttled the page to make sure it's visible, in real time this only is like a 0.5-1s flicker, but it's very noticeable when on mobile.

The individual component styles render instantly (like the purple tag button you see), but the actual global styles (like page margin) do not appear till after the entire page has rendered without them.

I don't think I'm using it incorrectly, I have my global styles rendered in my main layout and I also have gatsby-plugin-styled-components in my gatsby-config.js.

Everything else has been working great on this latest beta

probablyup · 2018-09-16T05:56:39Z

@garetmckinley can you provide a reproduction repo or codesandbox?

garetmckinley · 2018-09-16T05:59:23Z

Yeah, won't be able to till tomorrow afternoon/evening sometime. The blog I linked to is open source if you wanna look at it, but I totally understand if you'd rather wait for a stripped down repro

probablyup · 2018-09-16T06:05:28Z

Yeah it's too difficult to chase things down without a minimized example. It's also a double-check on your end to make 100% sure there isn't a library clash happening, etc.

garetmckinley · 2018-09-16T06:07:23Z

Yeah np, I'll share a link tomorrow afternoon

kakadiadarpan · 2018-09-19T06:04:49Z

Might be related to #8224

probablyup · 2018-09-21T00:54:21Z

The hoisting fix was released in v4.0.0-beta.8

kakadiadarpan · 2018-09-21T05:55:33Z

Thanks for the update @probablyup! @kripod @garetmckinley @amankkg @tricoder42 can you try upgrading to v4.0.0-beta.8 and check if it fixes the issue for you?

gi-alec · 2018-09-21T17:46:54Z

Resolved my issue 👍

ghost · 2018-10-18T01:27:41Z

Thanks @amankkg

This seems to do the trick.

"gatsby-plugin-styled-components": "^3.0.0",
"styled-components": "4.0.1",
"babel-plugin-styled-components": "^1.7.1",

>layout.js
import { GlobalStyles } from 'utils/styles';
...
<GlobalStyles />

kakadiadarpan · 2018-10-23T11:51:04Z

We'll be closing this issue as it's resolution is confirmed by @gi-alec and @jameygleason

Feel free to open a new one if you still experience this problem 👍

rclai · 2019-02-12T02:03:24Z

It seems like this is broken now? @kakadiadarpan

Here are my dependencies

"dependencies": {
    "babel-plugin-styled-components": "^1.10.0",
    "gatsby": "^2.0.118",
    "gatsby-image": "^2.0.29",
    "gatsby-plugin-manifest": "^2.0.17",
    "gatsby-plugin-offline": "^2.0.23",
    "gatsby-plugin-react-helmet": "^3.0.6",
    "gatsby-plugin-sharp": "^2.0.20",
    "gatsby-plugin-styled-components": "^3.0.5",
    "gatsby-source-filesystem": "^2.0.20",
    "gatsby-transformer-sharp": "^2.1.13",
    "prop-types": "^15.7.1",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-helmet": "^5.2.0",
    "styled-components": "^4.1.3"
  }

Doing this

// gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
  ],
}

// global-styles.js
import { createGlobalStyle } from 'styled-components'

export default createGlobalStyle(`
html, body {
  background-color: red;
}
`)

// layout.js
import GlobalStyles from './global-styles'
....
<GlobalStyles />

has no effect.. this is what I see on the DOM

<style data-styled="" data-styled-version="4.1.3">
/* sc-component-id: sc-global-90603819 */
</style>

Here's a sandbox https://codesandbox.io/s/jzjw9ojlxy

probablyup · 2019-02-12T02:09:11Z

You have to put GlobalStyles in your React component tree.

rclai · 2019-02-12T02:11:08Z

@probablyup it is. See my sandbox (src/components/layout.js).

rclai · 2019-02-12T23:27:11Z

Crap, used createGlobalStyle wrong, I wasn't supposed to use parentheses, though I'm curious why it didn't throw an error.

DSchau added the status: needs more info Needs triaging and reproducible examples or more information to be resolved label Sep 5, 2018

kakadiadarpan added the status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. label Sep 7, 2018

amankkg mentioned this issue Sep 9, 2018

v4 beta constructive feedback styled-components/styled-components#1969

Closed

kakadiadarpan closed this as completed Oct 23, 2018

hamedhossani mentioned this issue Apr 27, 2019

error in import styled-components to components React styled-components/styled-components#2517

Closed

Add support for styled-components v4 #7897

Add support for styled-components v4 #7897

Comments

kripod commented Sep 5, 2018

Summary

DSchau commented Sep 5, 2018

kripod commented Sep 5, 2018

kakadiadarpan commented Sep 6, 2018

amankkg commented Sep 7, 2018 • edited

tricoder42 commented Sep 7, 2018 • edited

garetmckinley commented Sep 8, 2018

tricoder42 commented Sep 8, 2018 via email

garetmckinley commented Sep 8, 2018

KyleAMathews commented Sep 8, 2018

garetmckinley commented Sep 8, 2018

amankkg commented Sep 9, 2018

garetmckinley commented Sep 9, 2018 • edited

probablyup commented Sep 9, 2018

probablyup commented Sep 10, 2018 via email

fabe commented Sep 10, 2018

amankkg commented Sep 10, 2018

probablyup commented Sep 10, 2018 via email • edited

probablyup commented Sep 10, 2018

probablyup commented Sep 10, 2018

garetmckinley commented Sep 10, 2018

amankkg commented Sep 11, 2018

probablyup commented Sep 11, 2018 • edited

amankkg commented Sep 11, 2018 • edited

garetmckinley commented Sep 15, 2018 • edited

probablyup commented Sep 16, 2018

garetmckinley commented Sep 16, 2018

probablyup commented Sep 16, 2018

garetmckinley commented Sep 16, 2018

kakadiadarpan commented Sep 19, 2018

probablyup commented Sep 21, 2018

kakadiadarpan commented Sep 21, 2018

gi-alec commented Sep 21, 2018

ghost commented Oct 18, 2018

kakadiadarpan commented Oct 23, 2018

rclai commented Feb 12, 2019 • edited

probablyup commented Feb 12, 2019

rclai commented Feb 12, 2019 • edited

rclai commented Feb 12, 2019 • edited

amankkg commented Sep 7, 2018 •

edited

tricoder42 commented Sep 7, 2018 •

edited

garetmckinley commented Sep 9, 2018 •

edited

probablyup commented Sep 10, 2018 via email •

edited

probablyup commented Sep 11, 2018 •

edited

amankkg commented Sep 11, 2018 •

edited

garetmckinley commented Sep 15, 2018 •

edited

rclai commented Feb 12, 2019 •

edited

rclai commented Feb 12, 2019 •

edited

rclai commented Feb 12, 2019 •

edited