eui icon indicating copy to clipboard operation
eui copied to clipboard

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

Open cdolek opened this issue 3 years ago • 2 comments

I get this warning in console, after upgrading to any version above v58.0.0

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

cdolek avatar Aug 08 '22 17:08 cdolek

Do you happen to have an Emotion cache configured? If so you can add the .compat = true option to bypass this: https://elastic.github.io/eui/#/utilities/provider#global-styles

thompsongl avatar Aug 08 '22 18:08 thompsongl

@thompsongl No cache configured, using like this:

import {
  ThemeProvider as StyledThemeProvider,
  StyleSheetManager,
  createGlobalStyle,
} from 'styled-components/macro';

import { EuiProvider } from '@elastic/eui';
...
...
const App = () => {
  return (
    <StyleSheetManager disableVendorPrefixes>
      <EuiProvider colorMode="dark">
        <StyledThemeProvider theme={someTheme}>
          <GlobalStyle />
            ...
            ...
        </StyledThemeProvider>
      </EuiProvider>
    </StyleSheetManager>
  );
};

cdolek avatar Aug 08 '22 20:08 cdolek

Can confirm this is reproducible when no cache is passed to EuiProvider: https://codesandbox.io/s/romantic-wilson-0oe88v?file=/index.js

I think I know why as well, we essentially need to use option 3 in https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922 if a custom cache isn't passed

cee-chen avatar Aug 11 '22 02:08 cee-chen