Search code examples
reactjsstyled-components

styled-components are not loaded the first time, reloading the page fix it

I have a website with mixed usage of wordpress and react. The react part has a big usage of styled-components. Usually the react part is reachable with a normal <a href> link from the wordpress part

The first time when the react page is rendered (coming from wordpress part) styled components is not loaded. If I reload the page it's all ok

I'm attaching the screenshots (first case not loaded, second one yes)

enter image description here

enter image description here

"styled-components": "^6.1.13" (upgraded from 4.x)
"react": "16.8.6"
"babel-plugin-styled-components": "2.1.4"

server nginx

I've tried to upgrade styled components, use incognito mode... no luck

UPDATE:

Today I noticed that the "data-styled-version" is present twice

<style data-styled="active" data-styled-version="6.1.11"></style>
<style data-styled="active" data-styled-version="6.1.13"></style>

When I reload the second row become the first and then the css works. With the above order they doesn't work. I don't know why I have double entries

Solution

  • Solved

    It was a third part library injected with google tag manager

    (https://www.customerly.io/ in order to solve instead of inject its tag in the head of html I've injected manually its code in the main react/javascript code)