Custom Host e.g. localhost.enterprise.com (HTTPS)

I’m using msw 0.15.7 with create-react-app using a custom HOST (via an environment variable), e.g. HOST=localhost.myenterprise.com. This causes the issue below. If I remove the host environment variable and just go with plain old localhost:3000, everything works fine. Can using a custom host be supported?

Unhandled Rejection (TypeError): Cannot read property 'addEventListener' of undefined:
(anonymous function)
<omitted>/node_modules/msw/lib/esm/index.js:1791
(anonymous function)
<omitted>/node_modules/msw/lib/esm/index.js:51
__awaiter
<omitted>/node_modules/msw/lib/esm/index.js:31
start
<omitted>/node_modules/msw/lib/esm/index.js:1789

Module../src/mocks.js
> 26 | start();

[kettanaito]

Glad to help. I’ll use this ticket as an opportunity to provide a better error message when this situation happens. A guidance like “Service Workers are not supported, or you are using a custom hostname” may be helpful for the user.

[kettanaito]

I’ve tried to reproduce this issue and was successful. The first thing I’ve noticed, is that when running under a custom hostname, the navigator.serviceWorker is undefined. This is the technical reason behind the exception you’ve attached.

However, the actual reason for the issue is that Service Workers can only be run over a secure connection (localhost is whitelisted).

Solutions

(Option 1) Use HTTPS for development

Recommended. If you establish your local server using HTTPS, it will be considered secure by the browser, allowing you to register Service Workers.

• Using HTTPS in development (Create React App)

To use HTTPs you would need to have an SSL certificate. You can generate a self-signed certificate for development, or reuse your existing certificate, if any.

(Option 2) Whitelist insecure host

Be cautious with this option. It implies whitelisting your custom host so that browser considers it secure. Do not whitelist hosts you don’t know.

1. Open the Chrome flags, and navigate to the “Insecure origins treated as secure” (chrome://flags/#unsafely-treat-insecure-origin-as-secure) setting.
2. Mark the setting as “Enabled”.
3. Put the full URL of your custom hostname (http://localhost.myenterprise.com:3000) in the textarea below.
4. Click “Relaunch” at the bottom of the page to restart the browser.

---

There is nothing I can do on to handle this on the library’s side, as this issue comes from the Service Worker’s behavior per specification.

Please let me know which option you’ve chosen, and whether it helped. Thanks.