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

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"
    ]
  }
}

Solution 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

Solution 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

Solution 3:

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.

Solution 4:

It's been a while since I was messing around with react, but react-scripts is built on top of webpack if I'm not mistaken, so it most likely use webpack-dev-server to speed up development. It uses websockets in order to communicate to the client to trigger a hot reload when it discovers changes on disk.

You are probably just starting the application in development mode, so if you're deploying it to a production environment, you should run npm run build which would create a set of javascript files that you can serve with your favourite webserver.