Bazel + Angular + SocketIO V3 สาเหตุ: Uncaught TypeError: XMLHttpRequest ไม่ใช่ตัวสร้าง

Question

ฉันต้องการเพิ่มsocket.io-client (v3) ในแอปพลิเคชัน Angular ของฉัน ฉันใช้ Bazel เพื่อสร้างและเรียกใช้ Angular น่าเสียดายที่ฉันได้รับข้อผิดพลาดนี้ในคอนโซลเบราว์เซอร์เมื่อเรียกใช้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)

ฉันมีปัญหาเดียวกันเมื่อทำงานกับ Socket.IO v2.0 แต่วิธีแก้ปัญหาเก่าใช้ไม่ได้อีกต่อไป

คราวนี้ยังไม่ได้เรียกใช้แอป Angular ในงานการผลิต

การสืบพันธุ์น้อยที่สุด

คุณสามารถลองด้วยตัวเอง: flolu / angular-bazel-socketio3-issue

เพียงแค่เรียกใช้แล้วyarn install yarn devข้อผิดพลาดอยู่ในคอนโซลเบราว์เซอร์ที่ http: // localhost: 4200

และโปรดทราบว่ามีข้อผิดพลาดอื่นเมื่อเรียกใช้แอปในเวอร์ชันที่ใช้งานจริงโดยyarn prodที่ 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

ฉันไม่รู้ว่าทำไมวิธีแก้ปัญหาของเซบาสเตียนถึงใช้ไม่ได้อีกต่อไป engine.io-clientไม่ได้เปลี่ยนแปลงมากที่สุดเท่าที่ผมสามารถมองเห็นและก็ยังคงมีหลายต้องใช้ของที่ควรจะแทนที่ด้วย"xmlhttprequest-ssl" "../xmlhttprequest"และนั่นคือสิ่งที่เขาทำในสคริปต์นั้น แต่ node_modules ของฉันไม่เปลี่ยนแปลงหลังจากสคริปต์นั้นบางทีฉันอาจทำผิด

แต่อย่างไรก็ตามสิ่งที่ได้ผลสำหรับฉันคือการทำสิ่งเดียวกันทุกpatch-packageประการแต่ผ่านทาง(ฉันคุ้นเคยกับการแก้ไข node_modules มากกว่า)

สำหรับบันเดิลการผลิตฉันจัดการเพื่อให้มันใช้งานได้หลังจากเพียงแค่ลบความต้องการส่วนเกินที่ทำให้เกิดข้อผิดพลาดในการผลิต

ที่กล่าวว่านี่คือแพตช์สุดท้าย (ใส่ลงใน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;
 })();

อย่าลืมเพิ่ม patch-package ในขั้นตอนหลังการติดตั้ง:

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