Emotion does not create style tags using Next.js #1644

marcosfromrio · 2019-11-18T12:44:30Z

What happened before: I used css to add styles, which creates a class for the element and also injected the styles into<head> <style>..., now using next.js, it doesn't but instead, I think the style is being injected through js files, and that gives me a problem: the styles are applied after the component appears on screen, so in my case I have a really big image , and I use emotion to set width, so when the screen is loaded, the image takes over the full screen, and only after that the emotion style, which defines width is applied.

And I don't know what to do to solve it. Any suggestion? My site is live at https://webstation.dev, maybe on first load you will see that the images cover the entire screen, and only a few milliseconds that the emotion style is applied, and the image gets its expected size.

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

Andarist · 2019-11-18T12:53:05Z

Seems like you didn't setup SSR correctly. Which css are you using? The one from emotion or from @emotion/core package? Have you tried doing any SSR-integration? Could you share how your setup looks like?

marcosfromrio · 2019-11-18T12:55:27Z

i'm using import { css } from "emotion";, and in next.config.js i only have others settings:

const withSass = require("@zeit/next-sass");
const withFonts = require("next-fonts");
// target: server to export as static site
const nextSettings = {
	target: "server",
	exportPathMap() {
		return {
			"/": { page: "/" },
		};
	},
};
module.exports = withSass(withFonts(nextSettings));

this is to use .scss file (other styles that i not use with emotion)

Andarist · 2019-11-18T13:02:35Z

You need to look into integrating with this API:
https://emotion.sh/docs/ssr#extractcritical
and also using this on the client:
https://emotion.sh/docs/ssr#hydrate

SSR usually requires some additional setup (especially when you are using emotion package and not @emotion/core)

marcosfromrio · 2019-11-18T13:03:01Z

edit: i add "emotion" in plugins in the .babelrc file, now i have the style tags, but he problem keeps happening, watch this video

marcosfromrio · 2019-11-18T13:04:29Z

https://vimeo.com/373898593

Andarist · 2019-11-18T13:26:12Z

Babel plugin, as far as I know, is completely irrelevant here. The important part is that there are no SSR-ed emotion-related style tags, which is easily inspectable by viewing your site's source: view-source:https://webstation.dev/ . This means that you have not setup emotion correctly, especially on the server. You need to make use of linked APIs

marcosfromrio · 2019-11-18T13:28:39Z

Well, the only thing I noticed is that now I have style tags. And in the next sample repository, they just add emotion to the plugins, I didn't see any extra settings. I am completely noob about this, what should I do then? I'm committing source code, if you find it helpful to try to help me.

marcosfromrio · 2019-11-18T13:30:28Z

https://github.com/flakesrc/webstation.dev/

the problem is in sections/presentation and header

Andarist · 2019-11-18T19:21:30Z

This example https://github.com/zeit/next.js/tree/master/examples/with-emotion-fiber shows how to do what you are trying to do.

azizhk · 2019-12-05T07:20:56Z

Hi, same problem.
I created a reproduction repo: https://github.com/azizhk/next-9-emotion-10-inject-global-bug
It should look like: (on this commit)

But it looks like: (on this commit)

I've updated emotion in the example from v8 to v10, the changes are there in this commit: azizhk/next-9-emotion-10-inject-global-bug@25c8bbe

Andarist · 2019-12-05T11:10:37Z

@azizhk you should change this:
https://github.com/azizhk/next-9-emotion-10-inject-global-bug/blob/25c8bbe9447ece3e9c6a62bdf330b85582670648/shared/styles.js#L1
to

-import { keyframes, css, injectGlobal } from 'emotion'
+import { injectGlobal } from 'emotion'
+import { keyframes, css } from '@emotion/core'

Keep in mind though that even with those changes the whole example might not work as expected in some regards - mainly due to how you mix vanilla emotion into it.

With emotion 10 you shouldn't have to use vanilla emotion with React, you can just use @emotion/core and optionally @emotion/styled. You also shouldn't have to do anything special to make SSR work - you don't need to use APIs like extractCritical etc.

azizhk · 2019-12-06T06:59:30Z

Keep in mind though that even with those changes the whole example might not work as expected in some regards - mainly due to how you mix vanilla emotion into it.

Can you expand or if there is some documentation on this. (Can document if you point me to issues.)

With emotion 10 you shouldn't have to use vanilla emotion with React, you can just use @emotion/core and optionally @emotion/styled. You also shouldn't have to do anything special to make SSR work - you don't need to use APIs like extractCritical etc.

Yeah we had a couple of issues, Multiple Style Tags (#1370) First Child Selectors (#1178)
So we chose this approach.

Also wanted to ask if extractCritical would be slower than normal approach? Should we measure?

azizhk · 2019-12-06T09:08:01Z

Keep in mind though that even with those changes the whole example might not work as expected in some regards - mainly due to how you mix vanilla emotion into it.

Ok, I understand this now, emotion package is framework agnostic.
For usage with React, we have to use @emotion/core, @emotion/styled, create-emotion-server.

css from emotion returns a string.
css from @emotion/core returns a custom data type.

I've updated the example in the next.js repo: vercel/next.js#9646
Would prefer your review.

Andarist · 2019-12-07T20:48:38Z

Also wanted to ask if extractCritical would be slower than normal approach? Should we measure?

extractCritical is slower by its nature (extra work to be done), but it probably isn't slow enough for you to care about it. You can benchmark your case if you want to.

css from emotion returns a string.
css from @emotion/core returns a custom data type.

Yes - that's the difference. By using custom data types in the latter case we can have CacheProvider API which wouldnt be possible if we'd have returned plain strings.

Would prefer your review.

Gonna take a quick look.

lcswillems · 2019-12-17T10:42:01Z

@Andarist The link you give to Next.js Emotion Fiber example should be added to SSR doc page, because currently, when I read this page, it says there is nothing to do with Next.js which is wrong (if I do nothing, <style> tags are added after the component).

More emotion-fiber is not a good name for the example. fiber means nothing for me.

Vadorequest · 2020-03-03T18:11:48Z

For anyone interested with a real use-case example, check out https://github.com/UnlyEd/next-right-now

Interesting parts are:

Andarist · 2020-03-14T17:41:25Z

The issue has become offtopic - if you experience problems with setting up Emotion with some framework please open a new issue in which we are going to be able to focus on aiding you. Right now it doesn't seem there is anything actionable for us here.

marcosfromrio added the invalid label Nov 18, 2019

Andarist added question and removed invalid labels Nov 18, 2019

azizhk mentioned this issue Dec 9, 2019

Use React Specific Emotion Packages. anarock/pebble#291

Closed

Andarist closed this as completed Mar 14, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Emotion does not create style tags using Next.js #1644

Emotion does not create style tags using Next.js #1644

marcosfromrio commented Nov 18, 2019

Andarist commented Nov 18, 2019

marcosfromrio commented Nov 18, 2019

Andarist commented Nov 18, 2019

marcosfromrio commented Nov 18, 2019

marcosfromrio commented Nov 18, 2019

Andarist commented Nov 18, 2019

marcosfromrio commented Nov 18, 2019

marcosfromrio commented Nov 18, 2019 •

edited

Andarist commented Nov 18, 2019

azizhk commented Dec 5, 2019

Andarist commented Dec 5, 2019

azizhk commented Dec 6, 2019

azizhk commented Dec 6, 2019 •

edited

Andarist commented Dec 7, 2019

lcswillems commented Dec 17, 2019 •

edited

Vadorequest commented Mar 3, 2020

Andarist commented Mar 14, 2020

Emotion does not create style tags using Next.js #1644

Emotion does not create style tags using Next.js #1644

Comments

marcosfromrio commented Nov 18, 2019

Andarist commented Nov 18, 2019

marcosfromrio commented Nov 18, 2019

Andarist commented Nov 18, 2019

marcosfromrio commented Nov 18, 2019

marcosfromrio commented Nov 18, 2019

Andarist commented Nov 18, 2019

marcosfromrio commented Nov 18, 2019

marcosfromrio commented Nov 18, 2019 • edited

Andarist commented Nov 18, 2019

azizhk commented Dec 5, 2019

Andarist commented Dec 5, 2019

azizhk commented Dec 6, 2019

azizhk commented Dec 6, 2019 • edited

Andarist commented Dec 7, 2019

lcswillems commented Dec 17, 2019 • edited

Vadorequest commented Mar 3, 2020

Andarist commented Mar 14, 2020

marcosfromrio commented Nov 18, 2019 •

edited

azizhk commented Dec 6, 2019 •

edited

lcswillems commented Dec 17, 2019 •

edited