PWA template:checkValidServiceWorker returns HTML instead of JS

[am2222]

Hello,
I have faced an issue with PWA template.
After creating app from PWA tamplate. on the local host it does not enable service worker. During My debug I found that the problem is that in the following code

function checkValidServiceWorker(swUrl, config) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl, {
    headers: { 'Service-Worker': 'script' },
  })
    .then((response) => {
      // Ensure service worker exists, and that we really are getting a JS file.
      const contentType = response.headers.get('content-type');
      if (
        response.status === 404 ||
        (contentType != null && contentType.indexOf('javascript') === -1)
      ) {
        // No service worker found. Probably a different app. Reload the page.
        navigator.serviceWorker.ready.then((registration) => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker found. Proceed as normal.
        registerValidSW(swUrl, config);
      }
    })
    .catch(() => {
      console.log('No internet connection found. App is running in offline mode.');
    });
}

content type is not javascript and it is HTML. And Somehow it makes sense because swUrl parameter is a file ins src folder and does not exist in the public folder.
I think I have to use webpack to compile the serviceworker.js and then server it from public folder, But I could not find any solutions for it. Can someone please help me with issue?
P.S. : I have changed index.js file and enabled serviceWorkerRegistration.register(); function and also removed the NODE_ENV === 'production' from the serviceworker to be able to run it on the test environments

Thanks