question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

gatsby-plugin-emotion adds styles inside body during build, but on rehidratation styles are moved to the header

See original GitHub issue

Description

gatsby-plugin-emotion adds styles inside body during build, but on rehidratation styles are moved to the header

Steps to reproduce

Simply use this plugin gatsby-plugin-emotion and run build.

Expected result

im not sure, but should not jump to <head/>

Actual result

styles are added to <head/>

Environment

System: OS: Windows 10 10.0.18363 CPU: (12) x64 Intel® Core™ i7-8700K CPU @ 3.70GHz Binaries: Node: 12.9.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 44.18362.449.0 npmPackages: gatsby: ^2.21.9 => 2.21.9 gatsby-common: link:…/…/packages/gatsby-common => 1.0.0 gatsby-image: ^2.4.0 => 2.4.0 gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5 gatsby-plugin-catch-links: ^2.0.9 => 2.3.0 gatsby-plugin-emotion: ^3.0.1 => 3.0.1 gatsby-plugin-layout: ^1.3.0 => 1.3.0 gatsby-plugin-manifest: ^2.0.12 => 2.4.1 gatsby-plugin-material-ui: ^2.1.8 => 2.1.8 gatsby-plugin-react-helmet: ^3.0.0 => 3.3.0 gatsby-plugin-sharp: ^2.0.15 => 2.6.0 gatsby-plugin-sitemap: ^2.0.3 => 2.4.1 gatsby-plugin-typescript: ^2.0.3 => 2.4.0 gatsby-remark-component: ^1.1.3 => 1.1.3 gatsby-remark-images: ^3.0.1 => 3.3.0 gatsby-source-filesystem: ^2.0.12 => 2.3.0 gatsby-transformer-remark: ^2.1.15 => 2.8.4 gatsby-transformer-sharp: ^2.1.9 => 2.5.0 npmGlobalPackages: gatsby-cli: 2.12.7

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
riccardogioratocommented, Dec 30, 2020

Any news on this issue with emotion @wardpeet ?

0reactions
LekoArtscommented, Jan 25, 2022

Hi!

I’m closing this as a stale issue as in the meantime Gatsby 4 and related packages were released. You can check our Framework Version Support Page to see which versions currently receive active support.

Please try the mentioned issue on the latest version (using the next tag) and if you still see this problem, open a new bug report. It must include a minimal reproduction.

Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Problems with Emotion (Styled Components) on Gatsby
This is happening because in Emotion 11 the package names have changed. I don't believe gatsby-plugin-emotion is up to date yet, ...
Read more >
Gatsby Changelog | 5.3.0
Now, when a code update or data update is made for the <Header> component, only the HTML for the Slice will be updated,...
Read more >
10 Gatsby styling methods - LogRocket Blog
This tutorial runs through 10 Gatsby styling options including Emotion, Bulma, Less, Stylus, SASS, and others.
Read more >
gatsby | Yarn - Package Manager
Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fast — no ...
Read more >
Gatsby Tutorial #6 - Styling Components - YouTube
Hey gang, in this Gatsby tutorial we'll see how to style our components using CSS modules.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found