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

Question

I want to add 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)

I had the same issue when working with Socket.IO v2. But the old solution doesn't work anymore.

Also this time, not even running the Angular app in production works.

Minimal Reproduction

You can try it yourself: flolu/angular-bazel-socketio3-issue

Just run yarn install and then yarn dev. The error is in the browser console at http://localhost:4200.

And note that there is another error when running the app in production with yarn prod at 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

I have no idea, why Sebastian's solution doesn't work anymore. engine.io-client didn't change much as I can see and it still has several requires of "xmlhttprequest-ssl" which should be substituted with "../xmlhttprequest". And that's what he does in that script. But my node_modules do not change after that script, maybe I'm doing smth wrong.

But anyways, what worked for me is doing exactly the same thing but via patch-package (I'm just more used to it for patching node_modules).

As for the production bundle, I managed to get it working after just removing excess require that causes the error in production.

That said, here is the final patch (put it into 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;
 })();

Also, don't forget to add patch-package in postinstall step:

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