Styled-components not rendering in Netlify

Support
1

Hi,
Our Netlify site guidedogs-qa.netlify.app is an app using:

  • node@16.18.1
  • Nextjs@13.5.6
  • styled-components@6.1.1
  • typescript@5.2.2
  • netlify-cli@17.10.1
  • netlify-lambda@2.0.16

It is building and deploying without any issue but the components that are styled with styled-components are not rendering at all. The rest of the css is rendering fine.
The same issue happens locally, but when I run it on nextjs (localhost:3000), it’s working correctly but not when I run Netlify (localhost:8888). We have some Netlify functions running on localhost:7000 that work fine as well.
I’ve tried using previous versions of styled-components@5.2.1 and netlify-cli@3.4.0 but I got the same response.
The domain is gd-qa.guidedogs.org.uk

Is there something else I need to set up to make it work correctly?

Thanks,
Ana

2

Unrelated to this issue, but you need to get rid of that. It’s a long-deprecated tool.

I checked your website and I’m not sure which of your components are having issues. Could you please clarify where we can see the issues?

3

Hi, if you compare our production site Sponsor a puppy today | Guide Dogs with the same page on QA Sponsor a puppy today | Guide Dogs, you’ll find that the components using styled-components lib are not rendered.

Thanks

4

Thanks for that demonstration!
Two suggestions:

  1. Looking at the dev console, I see tons of errors fetching files from some site netlify does not host. I’ve included a snapshot of those but I don’t think this is related to netlify configuration or site service at all - however I do expect it is at least some of the problem.

    Sponsor_a_puppy_today___Guide_Dogs
    Sponsor_a_puppy_today___Guide_Dogs795×525 96.1 KB

  2. As a first pass, we recommend downgrading to at most node 13.4.x since there are known issues with 13.5 and beyond at the moment. Could you give that a try and let us know if things improve

5

Thanks, but we’re using next@13.5.6 and with node@13 the app doesn’t even run.

6

Apologies, we recommend next 13.4.x as there are known issues with next 13.5 and above (not node!)

7

Just tried with next@13.4.19, sadly same response.

8

I found the issue. The failing URL was included in the redirects block in the netlify.toml file, so it was rendered by back end not being able to find the styles for it.
Thanks for your help!

9

thanks for coming back and sharing your solution with the community! :+1:t6: