Direct link in SPA not working

My netlify sitename is

My web app is working fine and always build successfully and deployed. There is no 404 error because I have _redirects with /* /index.html 200

The problem is when I try to paste any link directly into the browser, the page gets loaded with a strange display like no css being applied. When this happens there is no error in the console shown so that I can debug further to remove this error.

But if I visit the page from within the app, the same page displays perfectly fine like this

It sometimes also happen when I refresh the page on any link and the page gives disturbed looked.

Please advise.

I did some digging and I can recreate the problem (by searching and then refreshing). The stylesheets and the javascript are injected in the site, and if the rewrite for SPA’s wasn’t working, you’d get a page not found error. No errors in console or assets not being loaded in the network tab either. I suspect this has something to do with your styled components, but that’s just a hunch. I do not think this issue is Netlify related though…

1 Like

Thank you Tom. You are right. Problem was with Styled Components. There shouldn’t be any import statement anywhere in the Styled Components. I was importing google fonts. Removing it has fixed this problem

Nice one! Glad you managed to fix it, happy to help!