preactjs
Bug: Failing GET request upon fresh project creation
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.
- Run
npx preact-cli create - Run
npm run dev - Open
http://localhost:8080/ - Open Chrome DevTools Console
- 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
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.
It's the default one. There's no existing service worker. It's a freshly created project
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.
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?
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.
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.
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
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.
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.
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.
Closing this out as I've never been able to reproduce nor have I heard anything else regarding this in over a year.