React App hosted in Firebase Hosting - Uncaught SyntaxError: Unexpected token '<'

Question

I've seen at least 4 threads with the same problem and tried solutions from them, but none of them worked for me.

When I deploy my react app to firebase hosting I get blank page and a following error:

The only way to get it working is to empty cache and hard reload, but then reloading it again would cause exactly the same error. I double checked my build html gets assets from correct folders using %PUBLIC_URL% as part of the routes in public/index.html

I also commented out manifest and the whole registering of the serviceWorker function, then rebuild it and deployed it, but I still have exactly the same problem.

At this point I'm a bit dumbfounded cause I think it was caused by whole caching system and now that I disabled it, it still remains so I don't know anymore how this whole thing actually works

My firebase.json

{
  "hosting": {
    "public": "build",
    "site": "react-pukinn",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      { "source":"/serviceWorker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
    ]
  }
}

My serviceWorker.js:

let CACHE_NAME = 'pukinn';
const urlsToCache = [
    '/',
    '/index.html',
];
self.addEventListener('install', (event) => {
    // Perform install steps
    event.waitUntil(
    caches.open(CACHE_NAME)
        .then(function(cache) {
            console.log('Opened cache');
            return cache.addAll(urlsToCache);
        })
    );
});

self.addEventListener('fetch', (event) => {
    event.respondWith(caches.match(event.request)
        .then(function(response) {
            if (response) {
                return response;
            }
                return fetch(event.request);
            })
    );
});

self.addEventListener('install', (event) => {
    // Perform install steps
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function(cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
        })
    );
    self.skipWaiting();
});

manifest.json

{
  "short_name": "Púkinn",
  "name": "Púkinn",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "icons/knight_demon-192x192-min.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icons/knight_demon-512x512-min.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "index.html",
  "display": "standalone",
  "theme_color": "#ed1c24",
  "background_color": "#212121"
}

Answer 1

I found the problem. My serviceWorker.js file was in the root of the project instead of my ./src folder. So what happed is that on build it did not include it into build folder that is used for hosting. Really dumb mistake on my part.