Bazel + Angular + SocketIO V3 Causes: Uncaught TypeError: XMLHttpRequest is not a constructor

Question

我要添加socket.io-client (v3) to my Angular application. I use Bazel to build and run Angular. Unfortunately I get this error in the browser console when running the 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 的浏览器控制台中。

请注意，当运行将 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

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"

Bazel + Angular + SocketIO V3 Causes: Uncaught TypeError: XMLHttpRequest is not a constructor

Bazel + Angular + SocketIO V3 Causes: Uncaught TypeError: XMLHttpRequest is not a constructor

xmlhttprequest

socket.io

typescript

bazel

angular

最小复制