Bootstrap: The pseudo class “: first child” is potentially insecure when processed on the server side. Try changing it to “: first type”

🙋Get Help
1

Hi, I’m new to frontity and I have a question.
I’m trying to add boostrap to my project and did the things from the answer above, and it works, but it shows me an error:

The pseudo class “: first child” is potentially insecure when processed on the server side. Try changing it to “: first type”.

Could you help me with this or tell me why you are showing me this? Thank you

2

Hi @fgarayco

This seems to be an emotion issue

As emotion is used internally by Frontity our code should take into account what can and cannot be done using CSS-In-JS with emotion

For this specific issue, there’s this solution that seems to work pretty well to solve this in a Frontity project

import { CacheProvider } from '@emotion/core'
import createCache from '@emotion/cache'

const myCache = createCache()
myCache.compat = true

<CacheProvider value={myCache}>
  <App/>
</CacheProvider>

Here you have a working demo of a Frontity project loading Bootstrap CSS styles and applying this solution to avoid this error message → https://github.com/frontity-demos/bootstrap-theme-demo

Hope this helps

What are you building with Frontity?

1 Like
4

Hello, thanks for the answer.
It works, but it show me for a few seconds the page whitout styles, for know, this is a good solution, but if you know why is this happend let me know.

Im working in a site to show news about themes relationated to videogames, and geek culture, and i thought that frontity it was a good option to do this. i want to learn more about this framework :slight_smile:

6

The thing is first child is not safe on SSR. For an isomorphic app (like the one you’re doing with Frontity) you should use first type instead.

This is happening because you’re loading bootstrap CSS that is not really made to be used in SSR or with CSS-In-JS that is the approach we recommend for styling your Frontity project.

So, you can load CSS files for your Frontity project but you may have some issues like this one. Also by loading CSS files directly using the Global component Frontity will not be able to optimize your code in the final bundle (bigger size of your final files, less performance and so on)

Please, read the section Styles in our docs to learn more about this

1 Like
7

I see, well, thanks for the answer and the information. :smiley:

8

Hello, if somebody have the same trouble, i found a particular solution. I use a library based in styled components and emotion, so, it works cool.
here is the library:

there are more libraries by the way.

3 Likes