Following the original publication of this post I received this tweet suggesting we should change the behaviour of the underlying
Send a PR to change the name to .LICENSE.txt by default.
— Tobias Koppers (@wSokra) January 22, 2020
That seemed like an excellent idea! I raised this PR which changes the behaviour such that instead of
.LICENSE files being produced,
.LICENSE.txt files are pumped out instead. Crucially they are IIS (and other servers) friendly. The great news is that future users of webpack / create-react-app etc will not face this problem at all; result!
Recently my beloved PWA died. I didn't realise it at first. It wasn't until a week or so after the tragedy that I realised he'd gone. In his place was the stale memory of service workers gone by. Last week's code; cached and repeatedly served up to a disappointed audience. Terrible news.
What had happened? What indeed. The problem was quirky and (now that I know the answer) I'm going to share it with you. Because it's entirely non-obvious.
Once I realised that I was repeatedly being served up an old version of my PWA, I got to wondering.... Why? What's happening? What's wrong? What did I do? I felt bad. I stared at the ceiling. I sighed and opened my Chrome devtools. With no small amount of sadness I went to the
Application tab, hit
Service Workers and then
Then I hit refresh and took a look at console. I saw this:
What does this mean? Something about a "bad-precaching-response". And apparently this was happening whilst trying to load this resource:
404 was preventing pre-caching from executing successfully. This was what was killing my PWA. This was the perpetrator. How to fix this? Read on!
Time to find out what's going on. I dropped that URL into my browser to see what would happen.
404 city man:
So, to disk. I took a look at what was actually on the server in that location. Sure enough, the file existed. When I opened it up I found this:
What is this? Well, as the name of the file suggests, it's licenses. For some reason, my build was scraping the licenses from the head of some of my files and placing them in a separate
6.20102e99.chunk.js.LICENSE file. Doing some more digging I happened upon this discussion against the
create-react-app project. It's worth saying, that my PWA was an ejected
It turned out the the issue was related to the
terser-webpack-plugin. The default behaviour performs this kind of license file extraction. The app was being served by an IIS server and it wasn't configured to support the
.LICENSE file type.
The simplest solution was simply this: wave goodbye to
LICENSE files. If you haven't ejected from your
create-react-app then this might be a problem. But since I had, I was able to make this tweak to the terser settings in the
And with this we say goodbye to our
404s and hello to a resurrected PWA!