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

Question

I am deploying a React app but am getting a strange error when I visit the page over https.

When I visit the page over https I receive the following error:

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

But when I go to the page over http it works perfectly.

The problem is I'm not using websockets as far as I can tell. I searched through the code to see if there is a request to http that should be to https or to ws: instead of wss: but I don't see anything.

Has anyone run into this before?

I am including a copy of the package.json file. Let me know if you need me to upload any other parts of code to help debug.

Thanks in advance.

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "baffle": "^0.3.6",
    "cross-env": "^6.0.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-player": "^1.14.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-typist": "^2.0.5",
    "webpack-hot-dev-clients": "^2.0.2"
  },
  "scripts": {
    "start": "cross-env react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

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

Answer 2

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