emotion
emotion copied to clipboard
emotion-js
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".
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:
reactversion: 18.2.0@emotion/reactversion: 11.9.3
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.
@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.
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?
Is there any progress on a solution to remove/mute this annoying log?
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.
If you want solve problem directly with CSS. Maybe this can help you.
/* *:not(:not(:last-child) ~ *) = *:first-child */
*:not(:not(:last-child) ~ *) {
...
}
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