The React app error “Failed to construct ‘WebSocket’: An insecure WebSocket connection cannot be initiated from a page loaded over HTTPS” has been resolved.

by

14👍

✅

A lot of answers here actually solve the issue, but the simplest way I have found since I asked this question is to add the npm package serve to your dependencies.

yarn add serve or npm i serve

and then replace your start script with the following:

"scripts": {
    "start": "serve -s build"
  }

This is actually straight out of the create-react-app docs.

51👍

For those waiting for a patch for react-scripts:

For local testing over HTTPS, you can manually edit the following file:

node_modules/react-dev-utils/webpackHotDevClient.js

At line 62, replace the code with:

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

For deployment, follow these steps:

npm install -g serve // This can also be done locally

npm run build

In your package.json, add a deploy script to work with serve:

"scripts": {
  "deploy": "serve -s build",
}

Then run:

npm deploy or yarn deploy

Hope this answer helps you resolve the error. For more information, you can refer to the source here.

This bug has been fixed in the latest version of the release. To see the source file, click here.

8👍

Here’s a simpler solution: downgrade your react-scripts to version 3.2.0 in your package.json. If your current version is 3.3.0, you can follow these steps:

  1. Delete your package-lock.json and node_modules directory by running the command rm -rf package-lock.json node_modules.
  2. Run npm i to install the packages specified in the downgraded package.json.
  3. Commit both the new package.json and package-lock.json files to your repository.

Similar post

Leave a comment