Using emotion with Next.js. :first-child selector gives me an error: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". #2917

lumenwrites · 2022-10-11T10:45:16Z

Current behavior:

I'm using emotion with Next.js.

If I use a :first-child selector, I see the error in dev tools:

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

But I can't use :first-of-type because, well, I need to use :first-child, and they behave differently.

To reproduce:
Create a Next.js project that uses emotion, use :first-child anywhere in CSS.

Expected behavior:
Not having an error in the dev tools.

Environment information:

react version: 18.2.0
@emotion/react version: 11.9.3

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

lumenwrites · 2022-10-21T11:54:19Z

Hey guys, if there's no easy way to fix this bug, do you think there can at least be a workaround that would allow me to suppress the error?

It doesn't break anything, it just keeps annoying me by showing up in devtools.

codebykat · 2022-11-14T03:50:15Z

@lumenwrites There is this hilariously-named comment:

/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */

(Put it on the same line as the selector)

However I'm back here because I'm seeing an issue where the console error has returned, so it may be broken in recent Emotion versions 🙄

See #1105 for some prior discussion.

kevinpfox · 2023-05-06T00:29:36Z

We are currently using Emotion + MUI5 + Next.js.

I did a bunch of research to see why this warning exists. I read a bunch of Github threads, collecting more details here and there.

I did a bunch of testing on dev and prod builds of our app to see if Emotion injectes <script> tags anywhere near the items we create inside of <div id="__next"> </div> (where the whole app lives) or upper level MUI elements for Dialogs, Date Picker etc. pretty far down the document.

I never saw Emotion placing <style> tags outside of the <head> tag, for both server and client renders.

For ref:
https://github.com/mui/material-ui/blob/master/examples/material-next-ts/src/createEmotionCache.ts#L9-L18
https://github.com/mui/material-ui/blob/master/examples/material-next-ts/pages/_document.tsx#L27

Is this warning completely irrelevant Next.js + MUI5 users?

TiagoJeronimo · 2023-06-26T10:55:56Z

Is there any progress on a solution to remove/mute this annoying log?

DamSenViet · 2023-10-03T04:24:59Z

Bumping... Just ran into this today on a use case that made sense to not see it.

Rendering MDX and need the first child's top margin removed. Hoping to see it muted soon.

FizzyElt · 2023-11-03T06:21:45Z

If you want solve problem directly with CSS.
Maybe this can help you.

/* *:not(:not(:last-child) ~ *) = *:first-child */
*:not(:not(:last-child) ~ *) {
...
}

kevinpfox · 2023-11-03T14:32:52Z

If you feel comfortable suppressing the error you can add this one line....

const createEmotionCache = (): EmotionCache => {
  let insertionPoint;

  if (isBrowser) {
    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
      'meta[name="emotion-insertion-point"]'
    );
    insertionPoint = emotionInsertionPoint ?? undefined;
  }

  const theCache = createCache({ key: 'mui-style', insertionPoint, prepend: true });

  // Add this <------------------------------------------------------------------------------------
  theCache.compat = true;

  return theCache;
};

From - #1105 (comment)

lumenwrites added bug needs triage labels Oct 11, 2022

siriwatknp mentioned this issue Apr 7, 2023

[Table][joy] Disable emotion SSR warning mui/material-ui#36796

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using emotion with Next.js. :first-child selector gives me an error: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". #2917

Using emotion with Next.js. :first-child selector gives me an error: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". #2917

lumenwrites commented Oct 11, 2022 •

edited

Loading

lumenwrites commented Oct 21, 2022

codebykat commented Nov 14, 2022

kevinpfox commented May 6, 2023 •

edited

Loading

TiagoJeronimo commented Jun 26, 2023

DamSenViet commented Oct 3, 2023

FizzyElt commented Nov 3, 2023

kevinpfox commented Nov 3, 2023 •

edited

Loading

Using emotion with Next.js. :first-child selector gives me an error: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". #2917

Using emotion with Next.js. :first-child selector gives me an error: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". #2917

Comments

lumenwrites commented Oct 11, 2022 • edited Loading

lumenwrites commented Oct 21, 2022

codebykat commented Nov 14, 2022

kevinpfox commented May 6, 2023 • edited Loading

TiagoJeronimo commented Jun 26, 2023

DamSenViet commented Oct 3, 2023

FizzyElt commented Nov 3, 2023

kevinpfox commented Nov 3, 2023 • edited Loading

lumenwrites commented Oct 11, 2022 •

edited

Loading

kevinpfox commented May 6, 2023 •

edited

Loading

kevinpfox commented Nov 3, 2023 •

edited

Loading