I’ve started having issues with deploys after 28th October. Hitting any non-home route leads to having CSS not loaded correctly and styling going pear-shaped.
I’ve gone back my deploy history until I found a commit that is rendered correctly, and when deployed it on 29th and today (31st), the issue occurs.
Blog - deploy from 28th, that is currently what you see when you hit the base site at alanmynah.com
Blog - today’s deploy of the same commit to see the issue.
For some reason, your CSS import is being transferred as a JS file. If you meant to link CSS, you probably ended up linking a JavaScript file by mistake. If there’s no change from your end, this might be a problem with Netlify’s asset optimization feature. As I can see, you don’t have asset optimization enabled on the website where it’s working fine, but, it’s enabled on the one it’s not. So, either of those two problems might be the culprits.
Hey @hrishikesh, thanks a lot for helping and finding that. Good shout! It’s the same commit, so that rules out the css linkage.
The repo is public too, so feel free to double check
Asset optimisation shows as disabled, but it’s only the pretty URLs that are disabled, the rest is unchanged
I just checked your repository, but, sadly, it’s going to be difficult for me to pin down the issue as I’m unfamiliar with the framework that’s being used. However, it doesn’t really seem to be an issue with your code.
It’s kind of weird that the asset optimization settings are unchanged, because if those bundle and minify CSS/JS options were on from start, they would have rewritten your CSS and JS links to those cloudfront ones like you see in my previous post. The fact that they’re not rewritten means that they were not processed by Netlify, which isn’t an expected behaviour with asset optimization turned on. But to solve your problem, since your assets are already getting minified during build, I would suggest to disable asset optimization, because for some reason, those CSS files of yours are getting converted to empty JS files, probably some problem with Netlify.
However, when you’re disabling asset optimization, all paths would be relative and not absolute (as you’ve used relative paths in your code). Thus, there’s a potential problem in your src/template.html line 10-14. Those lines don’t have relative links mentioned properly, that is, they’re relative to the current folder and not the domain. This usually causes issues when the URLs don’t end with a ‘slash (/)’. Instead of adding those files they way you’re adding them now, prefix them with a /, which would make it something like <link rel='stylesheet' href='/global.css'>. This would make it relative to the domain and so, no matter from which path it’s called, the files would always exist correctly (as long as it exists at the root of the domain). It’s not necessary to make those changes, but, I would recommend to.
Wow, thanks a lot for a thorough reply. Greatly appreciated! Unfortunately absolute path didn’t make a difference, but not bundling CSS fixed the issue. Thank you very much @hrishikesh!
Epic work @hrishikesh, many many thanks!!! I do believe that’s a bug in our asset optimization feature and have included this report in an open internal issue about the problem.