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. Но старое решение больше не работает.

Кроме того, на этот раз даже запуск приложения 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;
 })();

Также не забудьте добавить патч-пакет на этапе постинсталляции:

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