Index.html being cached and served instead of JS/CSS files

I fear I will have to abandon Netlify due to what appears to be a bug surrounding caching during deploys. This issue is already discussed here but no satisfactory solution was found.

I am using the Netlify CLI to deploy. In my create-react-app app I have added some rewrite rules so that users can link directly to pages served using react-router. My netlify.toml looked like this:

[build]
  publish = "public"
  command = "yarn build"
[build.environment]
  YARN_VERSION = "1.3.2"
  YARN_FLAGS = "--no-ignore-optional"
[[redirects]]
  from = "/videos/*"
  to = "/videos/index.html"
  status = 200
  force = true

My app is hosted in a subdirectory called “videos”. It worked fine until I made a deploy which suddenly gave me this error in console:

Uncaught SyntaxError: Unexpected token '<'

And in Chrome, my CSS and JS files would say: was not loaded because its MIME type, “text/html”, is not “text/css”

When I looked closer, I could see that my index.html file was being served instead of my JS and CSS files.

I reverted to my last working commit , deployed and the CLI told me that it those files cached:

Deploying to draft URL...
√ Finished hashing 23 files
√ CDN requesting 0 files
√ Finished uploading 0 assets
√ Deploy is live!

I made one tiny spelling change in a React component and removed the rewrite rule from netlify.toml and deployed. The new files were deployed:

Deploying to main site URL...
√ Finished hashing 23 files
√ CDN requesting 4 files
√ Finished uploading 4 assets
√ Deploy is live!

…now, when I got to the unique deploy URL for this deploy it works, but if I go to my actual domain it’s still getting the cached index.html file being served in place of the JS/CSS. Even after hard reloading.

Either way, I need the rewrites to work for Netlify to be of use to me. I am convinced this is a bug within Netlify with SPAs.

If you remove the force = true from the redirect rule the index.html will not be served if there is a file for the requested path. That will make your CSS & JS files work.

More info about force: https://docs.netlify.com/routing/redirects/rewrites-proxies/#shadowing

1 Like

Hi Marcus, thanks for the response.

I did as you suggested and remove the force=true and it seems to have resolved the issue for now. However, I still think a caching issue is at play here.

I had two commits, one which I think may have been made before the rewrite rule was in place. They are identical except for a single character of spelling in one file.

When I deploy commit A I got the message implying that no files were uploaded because it already had them cached. This deploy worked. When I deployed commit B, with the single extra character (and I think after I enabled URL rewriting), files were uploaded and the whole thing broke.

After having typed that out I think I may have just resolved the issue in my head… duck development. I am complicating matters because this is a proof of concept with two separate repos being manually deployed as one site.

Anyway, hopefully this is of use to someone else. I am going to make some changes and see if everything’s working. Thanks for your help!

Update: solution is partially working. On the deploy URL everything is working well. However, on my actual domain (i.e. www.mysite.com) I am experiencing the following issues:

  • Refreshing the page gives the Uncaught SyntaxError: Unexpected token '<' error and I have to hard reload
  • In Chrome, every time I visit www.mysite.com I have to clear cache and hard reload. I hit the URL, get the “<” error, hard reload and it works.
  • In Firefox is just doesn’t work, with the “Unexpected token…” error being given every time.

I have cleared every cache etc. and still it persists. To re-iterate, the unique deploy URL works perfectly, so I feel this is some kind of caching issue. Maybe I need to wait for the CDN node caches to clear?

I will check back on this in the morning. If this is a caching issue, is there no way to flush the caches like a CloudFront invalidation?

Do you maybe need to run netlify deploy --prod to get your production deployment updated?

Good idea but I am definitely deploying using the --prod flag.

Hi, @netlfynoob. If you want us to troubleshoot further we need to know the two URLs (the real working URLs) you are comparing. If you are only looking at one URL, please let us know how to detect the change you are looking for at that URL.

You can post that information publicly or you can private message (PM) that to one of our support staff. I’ve confirmed that PMs are enabled for your community login. Please keep in mind that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.