New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for styled-components v4 #7897

Closed
kripod opened this Issue Sep 5, 2018 · 34 comments

Comments

Projects
None yet
@kripod
Contributor

kripod commented Sep 5, 2018

Summary

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

@DSchau

This comment has been minimized.

Contributor

DSchau commented Sep 5, 2018

@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

This comment has been minimized.

Contributor

kripod commented Sep 5, 2018

@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

This comment has been minimized.

Contributor

kakadiadarpan commented Sep 6, 2018

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

This comment has been minimized.

amankkg commented Sep 7, 2018

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

This comment has been minimized.

tricoder42 commented Sep 7, 2018

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

This comment has been minimized.

garetmckinley commented Sep 8, 2018

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

This comment has been minimized.

tricoder42 commented Sep 8, 2018

@garetmckinley

This comment has been minimized.

garetmckinley commented Sep 8, 2018

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

@KyleAMathews

This comment has been minimized.

Contributor

KyleAMathews commented Sep 8, 2018

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

@garetmckinley

This comment has been minimized.

garetmckinley commented Sep 8, 2018

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

This comment has been minimized.

amankkg commented Sep 9, 2018

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

This comment has been minimized.

garetmckinley commented Sep 9, 2018

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

This comment has been minimized.

probablyup commented Sep 9, 2018

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

This comment has been minimized.

probablyup commented Sep 10, 2018

@fabe

This comment has been minimized.

Member

fabe commented Sep 10, 2018

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

This comment has been minimized.

amankkg commented Sep 10, 2018

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

@probablyup

This comment has been minimized.

probablyup commented Sep 10, 2018

@probablyup

This comment has been minimized.

probablyup commented Sep 10, 2018

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

@probablyup

This comment has been minimized.

probablyup commented Sep 10, 2018

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

This comment has been minimized.

garetmckinley commented Sep 10, 2018

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

@amankkg

This comment has been minimized.

amankkg commented Sep 11, 2018

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

This comment has been minimized.

probablyup commented Sep 11, 2018

@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

This comment has been minimized.

amankkg commented Sep 11, 2018

@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

This comment has been minimized.

garetmckinley commented Sep 15, 2018

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

This comment has been minimized.

probablyup commented Sep 16, 2018

@garetmckinley can you provide a reproduction repo or codesandbox?

@garetmckinley

This comment has been minimized.

garetmckinley commented Sep 16, 2018

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

This comment has been minimized.

probablyup commented Sep 16, 2018

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

This comment has been minimized.

garetmckinley commented Sep 16, 2018

Yeah np, I'll share a link tomorrow afternoon

@kakadiadarpan

This comment has been minimized.

Contributor

kakadiadarpan commented Sep 19, 2018

Might be related to #8224

@probablyup

This comment has been minimized.

probablyup commented Sep 21, 2018

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

@kakadiadarpan

This comment has been minimized.

Contributor

kakadiadarpan commented Sep 21, 2018

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

This comment has been minimized.

gi-alec commented Sep 21, 2018

Resolved my issue 👍

@jameygleason

This comment has been minimized.

jameygleason commented Oct 18, 2018

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

This comment has been minimized.

Contributor

kakadiadarpan commented Oct 23, 2018

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 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment