Bazel + Angular + SocketIO V3 Cause: Errore di tipo non rilevato: XMLHttpRequest non è un costruttore

Question

Voglio aggiungere socket.io-client (v3) alla mia applicazione Angular. Uso Bazel per creare ed eseguire Angular. Sfortunatamente ricevo questo errore nella console del browser quando eseguo 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)

Ho avuto lo stesso problema lavorando con Socket.IO v2. Ma la vecchia soluzione non funziona più.

Anche questa volta non funziona nemmeno l'app Angular in produzione.

Riproduzione minima

Puoi provarlo tu stesso: flolu / angular-bazel-socketio3-issue

Corri yarn installe poi yarn dev. L'errore si trova nella console del browser all'indirizzo http: // localhost: 4200.

E nota che c'è un altro errore quando si esegue l'app in produzione con yarn prodhttp: // 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

Non ho idea del perché la soluzione di Sebastian non funzioni più. engine.io-clientnon è cambiato molto come posso vedere e ha ancora diversi requisiti di "xmlhttprequest-ssl"cui dovrebbe essere sostituito "../xmlhttprequest". Ed è quello che fa in quella sceneggiatura. Ma i miei node_modules non cambiano dopo quello script, forse sto sbagliando.

Ma comunque, quello che ha funzionato per me è fare esattamente la stessa cosa ma tramite patch-package(sono solo più abituato a patchare node_modules).

Per quanto riguarda il bundle di produzione, sono riuscito a farlo funzionare dopo aver rimosso il requisito in eccesso che causa l'errore in produzione.

Detto questo, ecco la patch finale (inseriscila 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;
 })();

Inoltre, non dimenticare di aggiungere il pacchetto di patch nel passaggio di postinstallazione:

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