Bazel + Angular + SocketIO V3 Causas: Error de tipo no detectado: XMLHttpRequest no es un constructor

Question

Quiero agregar socket.io-client (v3) a mi aplicación Angular. Uso Bazel para construir y ejecutar Angular. Desafortunadamente, aparece este error en la consola del navegador cuando ejecuto ts_devserver :

ERROR Error: Uncaught (in promise): TypeError: XMLHttpRequest is not a constructor
TypeError: XMLHttpRequest is not a constructor
    at ts_scripts.js?v=80175740:15476
    at Object.14.../globalThis (ts_scripts.js?v=80175740:15480)

Tuve el mismo problema cuando trabajaba con Socket.IO v2. Pero la vieja solución ya no funciona.

Además, esta vez, ni siquiera funciona la ejecución de la aplicación Angular en producción.

Reproducción mínima

Puede probarlo usted mismo: flolu / angular-bazel-socketio3-issue

Solo corre yarn instally luego yarn dev. El error está en la consola del navegador en http: // localhost: 4200.

Y tenga en cuenta que hay otro error al ejecutar la aplicación en producción con yarn proden http: // localhost: 4000:

ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'e' before initialization
ReferenceError: Cannot access 'e' before initialization
    at home.module-7db83ffb.js:formatted:953

Answer 1

No tengo idea de por qué la solución de Sebastian ya no funciona. engine.io-clientno cambió mucho, como puedo ver, y todavía tiene varios requisitos de los "xmlhttprequest-ssl"cuales debería sustituirse por "../xmlhttprequest". Y eso es lo que hace en ese guión. Pero mis node_modules no cambian después de ese script, tal vez estoy haciendo algo mal.

Pero de todos modos, lo que funcionó para mí es hacer exactamente lo mismo pero a través patch-package(estoy más acostumbrado a esto para parchear node_modules).

En cuanto al paquete de producción, logré hacerlo funcionar después de eliminar el exceso de requerimiento que causa el error en la producción.

Dicho esto, aquí está el parche final (póngalo en patches/engine.io-client+4.0.2.patch):

diff --git a/node_modules/engine.io-client/lib/transports/index.js b/node_modules/engine.io-client/lib/transports/index.js
index 923223d..1ec2668 100755
--- a/node_modules/engine.io-client/lib/transports/index.js
+++ b/node_modules/engine.io-client/lib/transports/index.js
@@ -1,4 +1,4 @@
-const XMLHttpRequest = require("xmlhttprequest-ssl");
+const XMLHttpRequest = require("../xmlhttprequest");
 const XHR = require("./polling-xhr");
 const JSONP = require("./polling-jsonp");
 const websocket = require("./websocket");
diff --git a/node_modules/engine.io-client/lib/transports/polling-xhr.js b/node_modules/engine.io-client/lib/transports/polling-xhr.js
index 9988b02..a2ff168 100755
--- a/node_modules/engine.io-client/lib/transports/polling-xhr.js
+++ b/node_modules/engine.io-client/lib/transports/polling-xhr.js
@@ -1,6 +1,6 @@
 /* global attachEvent */
 
-const XMLHttpRequest = require("xmlhttprequest-ssl");
+const XMLHttpRequest = require("../xmlhttprequest");
 const Polling = require("./polling");
 const Emitter = require("component-emitter");
 const { pick } = require("../util");
@@ -15,7 +15,6 @@ const debug = require("debug")("engine.io-client:polling-xhr");
 function empty() {}
 
 const hasXHR2 = (function() {
-  const XMLHttpRequest = require("xmlhttprequest-ssl");
   const xhr = new XMLHttpRequest({ xdomain: false });
   return null != xhr.responseType;
 })();

Además, no olvide agregar el paquete de parche en el paso posterior a la instalación:

"postinstall": "patch-package && ngcc"