Bazel + Angular + SocketIO V3 Penyebab: Uncaught TypeError: XMLHttpRequest bukan konstruktor

Question

Saya ingin menambahkan socket.io-client (v3) ke aplikasi Angular saya. Saya menggunakan Bazel untuk membangun dan menjalankan Angular. Sayangnya saya mendapatkan kesalahan ini di konsol browser saat menjalankan 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)

Saya mengalami masalah yang sama saat bekerja dengan Socket.IO v2. Tetapi solusi lama tidak berfungsi lagi.

Juga kali ini, bahkan tidak menjalankan aplikasi Angular dalam pekerjaan produksi.

Reproduksi Minimal

Anda dapat mencobanya sendiri: flolu / angular-bazel-socketio3-issue

Jalankan saja yarn installlalu yarn dev. Kesalahan ada di konsol browser di http: // localhost: 4200.

Dan perhatikan bahwa ada kesalahan lain saat menjalankan aplikasi dalam produksi dengan yarn proddi 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

Entah kenapa solusi Sebastian tidak berfungsi lagi. engine.io-clienttidak banyak berubah seperti yang saya lihat dan masih memiliki beberapa persyaratan "xmlhttprequest-ssl"yang harus diganti "../xmlhttprequest". Dan itulah yang dia lakukan dalam naskah itu. Tapi node_modules saya tidak berubah setelah skrip itu, mungkin saya melakukan kesalahan.

Tapi bagaimanapun, apa yang berhasil untuk saya adalah melakukan hal yang persis sama tetapi melalui patch-package(saya hanya lebih terbiasa untuk menambal node_modules).

Sedangkan untuk bundel produksi, saya berhasil membuatnya berfungsi setelah hanya menghilangkan persyaratan berlebih yang menyebabkan kesalahan dalam produksi.

Yang mengatakan, inilah tambalan terakhir (masukkan ke 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;
 })();

Juga, jangan lupa untuk menambahkan patch-package pada langkah postinstall:

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