Unhandled Rejection (Error): [MSW] Failed to register a Service Worker when using network IP

[arturopie]

Hi,

On a fresh clone, and after running node setup and npm start. I get an error when trying to open the exercise on a browser, using my network IP.

How to reproduce

1. Run npm start
2. Get the 'On Your Network' value. For example, if npm start outputs this

Compiled successfully!

You can now view react-hooks in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.222:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

3. Navigate to http://192.168.1.222:3000 on your browser
4. Click on the first exercise.

The iframe will show the following error:

Unhandled Rejection (Error): [MSW] Failed to register a Service Worker: this browser does not support Service Workers (see https://caniuse.com/serviceworkers), or your application is running on an insecure host (consider using HTTPS for custom hostnames).
▶ 10 stack frames were collapsed.
__webpack_require__
src/epicreact/react-hooks/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
src/epicreact/react-hooks/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://192.168.1.222:3000/static/js/main.chunk.js:1054:18
__webpack_require__
src/epicreact/react-hooks/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
checkDeferredModules
src/epicreact/react-hooks/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
src/epicreact/react-hooks/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://192.168.1.222:3000/static/js/main.chunk.js:1:75
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

[kentcdodds]

Unfortunately there's nothing we can do about this. It's a service worker limitation for security reasons. You either have to use HTTPS or localhost. Can't do anything about this ourselves. Sorry 😬