Bazel + Angular + SocketIO V3 Causas: TypeError não capturado: XMLHttpRequest não é um construtor

Question

Quero adicionar socket.io-client (v3) ao meu aplicativo Angular. Eu uso o Bazel para criar e executar o Angular. Infelizmente, recebo este erro no console do navegador ao executar o 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)

Eu tive o mesmo problema ao trabalhar com Socket.IO v2. Mas a solução antiga não funciona mais.

Também desta vez, nem mesmo rodando o app Angular em produção funciona.

Reprodução Mínima

Você pode tentar você mesmo: flolu / angular-bazel-socketio3-issue

Apenas corra yarn installe então yarn dev. O erro está no console do navegador em http: // localhost: 4200.

E note que não há outro erro ao executar o aplicativo em produção com yarn proda 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

Não tenho ideia de por que a solução de Sebastian não funciona mais. engine.io-clientnão mudou muito como posso ver e ainda tem vários requisitos "xmlhttprequest-ssl"que devem ser substituídos por "../xmlhttprequest". E é isso que ele faz nesse script. Mas meus node_modules não mudam após esse script, talvez eu esteja fazendo algo errado.

Mas de qualquer forma, o que funcionou para mim é fazer exatamente a mesma coisa, mas via patch-package(estou apenas mais acostumado a corrigir node_modules).

Quanto ao bundle de produção, consegui fazer funcionar depois de apenas retirar o excesso de requer que causou o erro na produção.

Dito isso, aqui está o patch final (coloque-o 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;
 })();

Além disso, não se esqueça de adicionar patch-package na etapa de pós-instalação:

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