Bug: Failing GET request upon fresh project creation

[merlinstardust]

Do you want to request a feature or report a bug?
Bug

What is the current behaviour?

Upon running npx preact-cli create and npm run dev, I see a failing GET request in the console, a network error response, and a "site cannot be installed" message.

⚛️Preact CLI development tip: A GET request just failed. This might fail for your users as well due to a network error. It may be worth adding runtimeCaching to your Service Worker.

The FetchEvent for "http://localhost:8080/" resulted in a network error response: an object that was not a Response was passed to respondWith().
Promise.then (async)
(anonymous) @ sw-debug.js:3

localhost/:1 Site cannot be installed: Page does not work offline. The page will not be regarded as installable after Chrome 93, stable release August 2021.

If the current behaviour is a bug, please provide the steps to reproduce.

1. Run npx preact-cli create
2. Run npm run dev
3. Open http://localhost:8080/
4. Open Chrome DevTools Console
5. See failing GET request, network error response, and "site cannot be installed" message

What is the expected behaviour?

There should be no failing GET request with a fresh install.

Please mention other relevant information.

This is the info from the Network tab of the failed request

General
Request URL: http://localhost:8080/
Referrer Policy: unsafe-url

Request Headers
Provisional headers are shown
Referer
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.40 Safari/537.36

This is the file the network error response points to.

self.addEventListener('fetch', function (event) {
	var isPostRequest = event.request.method === 'POST';
	event.respondWith(
		fetch(event.request).catch(function (err) {
			if (err instanceof TypeError) {
				if (isPostRequest) {
					// eslint-disable-next-line
					console.log(
						'⚛️Preact CLI development tip: A POST request just failed. This might fail for your users as well due to a network error. It may be worth exploring the backgroundSync API.'
					);
				} else {
					// eslint-disable-next-line
					console.log(
						'⚛️Preact CLI development tip: A GET request just failed. This might fail for your users as well due to a network error. It may be worth adding runtimeCaching to your Service Worker.'
					);
				}
			}
			return err;
		})
	);
});

Please paste the results of preact info here.

Environment Info:
  System:
    OS: macOS 11.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 14.8.0 - ~/.nvm/versions/node/v14.8.0/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v14.8.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.146
    Safari: 14.0.3
  npmPackages:
    preact: ^10.3.2 => 10.5.12 
    preact-cli: ^3.0.0 => 3.0.5 
    preact-render-to-string: ^5.1.4 => 5.1.12 
    preact-router: ^3.2.1 => 3.2.1 
  npmGlobalPackages:
    preact-cli: 3.0.5

[rschristian]

Which template are you using, or is a custom one?

The first thing that comes to mind is if you have an existing service worker for http:/loclahost:8080/ that's throwing things off. Trying removing it, that might be the issue.

[merlinstardust]

It's the default one. There's no existing service worker. It's a freshly created project

[rschristian]

Do you have any other browsers to test with? A quick google shows other people getting that with Chrome canary/beta channels.

Edit: I'm assuming you're on beta, as your user agent says v89.

[merlinstardust]

It is an issue with Chrome Beta. So it's not a huge issue at the moment, but doesn't that mean this will be an issue in a soon to be released version of Chrome?

[rschristian]

As far as I can tell it looks to be a Chrome bug. Honestly not sure. I don't see what would cause issues there.

[rschristian]

You should be able to add --no-sw to your run commands to get around this on Beta/ > v88. You won't get the debug SW on dev, but this probably isn't a huge deal.

[merlinstardust]

Just tried that. I get the same thing. I also tried it with --sw which gave me a different error of Uncaught ReferenceError: process is not defined

[rschristian]

Well --sw would enable the production service worker which you definitely wouldn't want if the debug already is causing issues, though it does look like you found a bug there. Will get that fixed up, thanks.

As for --no-sw, make sure you don't have a service worker installed by checking in Applications in the DevTools.

Unfortunately I really don't know what else to say at the moment. I'll try to investigate around but this seems to be something new popping up on a few projects and only with the canary/dev/beta builds of chrome. Will keep you posted if I find anything though.

[mwskwong]

Unfortunately I really don't know what else to say at the moment. I'll try to investigate around but this seems to be something new popping up on a few projects and only with the canary/dev/beta builds of chrome. Will keep you posted if I find anything though.

On Edge 89.0.774.45 (latest official release as of today), I hit the same problem.

[rschristian]

The dev mode SW is just there to disable the production one that you may test out with, so it isn't a full SW and that's where this error stems from. It's shouldn't be an issue with your production site at all, just in dev.

Might need to find a better way to manage that though the effect of this should be limited to your devtools really.

[rschristian]

Closing this out as I've never been able to reproduce nor have I heard anything else regarding this in over a year.