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.