Reaccionar error de la aplicación: Error al construir 'WebSocket': una conexión insegura de WebSocket no puede iniciarse desde una página cargada a través de HTTPS

Estoy implementando una aplicación React pero recibo un error extraño cuando visito la página a través de https.

Cuando visito la página a través de https, recibo el siguiente error:

SecurityError: error al construir 'WebSocket': una conexión insegura de WebSocket no puede iniciarse desde una página cargada a través de HTTPS.

Pero cuando voy a la página a través de http, funciona perfectamente.

El problema es que no estoy usando websockets por lo que puedo decir. Busqué a través del código para ver si hay una solicitud para http que debería ser https o ws: en lugar de wss: pero no veo nada.

¿Alguien se ha encontrado con esto antes?

Incluyo una copia del archivo package.json. Avíseme si necesita que cargue alguna otra parte del código para ayudar a depurar.

Gracias por adelantado.

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

Para personas que esperan scripts de reacción para un parche:

Para pruebas locales a través de https , puede editar manualmente

node_modules/react-dev-utils/webpackHotDevClient.js

Aquí está el código que querrás en la línea 62 de ese archivo:

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

Para la implementación, siga los pasos a continuación:

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

npm run build

Y luego, en su package.json, agregue un script de implementación para trabajar con serve:

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

Y entonces

npm deploy or yarn deploy

Espero que esta respuesta te ayude a deshacerte del error.

Para obtener más información, consulte aquí `

Muchas respuestas aquí realmente resuelven el problema, pero la forma más simple que he encontrado desde que hice esta pregunta es agregar el paquete npm serve a sus dependencias.

yarn add serve o npm i serve

y luego reemplace su script de inicio con lo siguiente:

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

Esto es en realidad directamente de las crear una reacción app- docs

Aquí hay una solución más simple. Baje de categoría react-scriptsa 3.2.0en su package.json(el mío estaba en 3.3.0).

Es posible que deba eliminar su package-lock.jsony node_modules( rm -rf package-lock.json node_modules), luego haga una npm i. Cometer tanto tu nuevopackage.json como package-lock.jsonal repositorio.

Ha pasado un tiempo desde que estaba jugando con react, pero react-scriptsestá construido sobre webpack si no me equivoco, por lo que lo más probable es que use webpack-dev-server para acelerar el desarrollo. Utiliza websockets para comunicarse con el cliente para activar una recarga en caliente cuando descubre cambios en el disco.

Probablemente esté comenzando la aplicación en modo de desarrollo, por lo que si la está implementando en un entorno de producción, debe ejecutar npm run buildlo que crearía un conjunto de archivos javascript que puede servir con su servidor web favorito.

• Crear en la parte posterior de la carpeta y la aplicación node.js
• Cree un enrutador rápido en la raíz de su aplicación
• Hacer un archivo server.js

Agregue este código en server.js

const express = require('express')
const path = require('path')
const app = express()

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')))
  // Handle React routing, return all requests to React app
  app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'))
  })
}
const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`API listening on port ${port}...`)
})

En pakage.json

,
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && yarn && yarn run build"
  }

Y agregue el proxy de ruta en /folder-name-react-app/pakage.json

  "proxy": "http://localhost:8080"

cualquiera que esté luchando con este problema en la implementación de heroku rebaja tu reac-scriptsmódulo 3.2.0.

1. eliminar package-lock.jsonarchivo
2. eliminar node_modulescarpeta
3. reemplazar react-scriptsversión a3.2.0
4. npm install todos los módulos nuevamente

Debe consultar este artículo del sitio web Create-React-App. Explica cómo implementar correctamente la aplicación React creada con 'Create-React-App' que apunta a un buildpack específico para la aplicación React, mars / create-react-app-buildpack, en Github que necesitabas al crear la aplicación Heroku.

https://create-react-app.dev/docs/deployment/#heroku

https://github.com/mars/create-react-app-buildpack

Tuve el mismo problema con el problema inseguro de WebSocket que todos tienen aquí, así que probé la solución del artículo Create-React-App. Solucionó el problema. No es necesario modificar node_module ni nada.

Todo lo que necesita hacer es usar este comando cuando cree la aplicación heroku desde la CLI en la raíz de la aplicación React:

heroku create --buildpack mars/create-react-app

entonces:

git push heroku master

cuando vas a tu sitio web en Heroku. se ejecutará como se espera sin ningún error "inseguro websocket".

(No sé cómo agregarle el paquete de compilación marte / create-react-app DESPUÉS de que ya haya creado / implementado en Heroku. Todavía no he llegado a esa parte).

La solución anterior parece abordar el problema que el equipo de create-react-app tiene para implementar en Heroku.