Bazel + Angular + SocketIO V3 原因：Uncaught TypeError: XMLHttpRequest is not a constructor

Posted 2023-04-18

【中文标题】Bazel + Angular + SocketIO V3 原因：Uncaught TypeError: XMLHttpRequest is not a constructor

【英文标题】：Bazel + Angular + SocketIO V3 Causes: Uncaught TypeError: XMLHttpRequest is not a constructor

【发布时间】：2021-02-24 10:17:50

【问题描述】：

我想将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 时遇到了同样的问题。 但是old solution 不再起作用了。

这一次，甚至没有在生产环境中运行 Angular 应用程序。

最小复制

你可以自己试试：flolu/angular-bazel-socketio3-issue

只需运行yarn install，然后运行yarn dev。错误出现在浏览器控制台中 http://localhost:4200。

请注意，在production 中使用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

【参考方案1】：

我不知道为什么Sebastian's solution 不再起作用了。 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"