React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS

For folks waiting for react-scripts for a patch:

For local testing over https, you can manually edit

node_modules/react-dev-utils/webpackHotDevClient.js

Here's the code you'll want at line 62 of that file:

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

For deployment follow below steps:

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

npm run build

And Then in your package.json add a deploy script to work with serve:

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

And then

npm deploy or yarn deploy

Hope this answer helps you get rid of the error.

For more info refer to here`

This bug has been fixed in the latest version of the release. Click here to see the source file

A lot of answers here do actually solve the issue but the simplest way I have found since I asked this question is to add 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

Here's a simpler solution. Downgrade your react-scripts to 3.2.0 in your package.json (mine was at 3.3.0).

You may need to delete your package-lock.json and node_modules (rm -rf package-lock.json node_modules), then do a npm i. Commit both your new package.json and package-lock.json to the repo.