Open lumenwrites opened 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.
@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
Current behavior:
I'm using emotion with Next.js.
If I use a
:first-child
selector, I see the error in dev tools: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