Bazel + Angular + SocketIO V3 Ursachen: Nicht erfasst TypeError: XMLHttpRequest ist kein Konstruktor

Question

Ich möchte meiner Angular-Anwendung socket.io-client (v3) hinzufügen . Ich benutze Bazel, um Angular zu erstellen und auszuführen. Leider erhalte ich diesen Fehler in der Browserkonsole, wenn ich den ts_devserver ausführe :

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)

Ich hatte das gleiche Problem bei der Arbeit mit Socket.IO v2. Aber die alte Lösung funktioniert nicht mehr.

Auch diesmal funktioniert nicht einmal die Angular-App in der Produktion.

Minimale Reproduktion

Sie können es selbst versuchen: flolu / angle-bazel-socketio3-issue

Einfach rennen yarn installund dann yarn dev. Der Fehler befindet sich in der Browserkonsole unter http: // localhost: 4200.

Beachten Sie, dass beim Ausführen der App in der Produktion unter yarn prodhttp: // localhost: 4000 ein weiterer Fehler auftritt:

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

Ich habe keine Ahnung, warum Sebastians Lösung nicht mehr funktioniert. engine.io-clienthat sich nicht viel geändert, wie ich sehen kann, und es gibt immer noch einige Anforderungen, durch "xmlhttprequest-ssl"die ersetzt werden sollte "../xmlhttprequest". Und genau das macht er in diesem Drehbuch. Aber meine node_modules ändern sich nach diesem Skript nicht, vielleicht mache ich etwas falsch.

Aber wie auch immer, was für mich funktioniert hat, ist genau das Gleiche zu tun, aber via patch-package(ich bin nur mehr daran gewöhnt, node_modules zu patchen).

Was das Produktionspaket betrifft, habe ich es geschafft, es zum Laufen zu bringen, nachdem ich nur überschüssige Anforderungen entfernt hatte, die den Fehler in der Produktion verursachen.

Das heißt, hier ist der letzte Patch (setzen Sie ihn ein 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;
 })();

Vergessen Sie auch nicht, das Patch-Paket im Schritt nach der Installation hinzuzufügen:

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