search

emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.48k stars 1.11k forks source link

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

Open lumenwrites opened 2 years ago

lumenwrites commented 2 years ago

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:

lumenwrites commented 2 years ago

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 commented 1 year ago

@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 https://github.com/emotion-js/emotion/issues/1105 for some prior discussion.

kevinpfox commented 1 year ago

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 commented 1 year ago

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

DamSenViet commented 1 year ago

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 commented 11 months ago

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

/* *:not(:not(:last-child) ~ *) = *:first-child */
*:not(:not(:last-child) ~ *) {
...
}
kevinpfox commented 11 months ago

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 - https://github.com/emotion-js/emotion/issues/1105#issuecomment-1058225197