Bazel + Angular + SocketIO V3 Causes: Uncaught TypeError: XMLHttpRequest n'est pas un constructeur
Je souhaite ajouter socket.io-client (v3) à mon application Angular. J'utilise Bazel pour créer et exécuter Angular. Malheureusement, j'obtiens cette erreur dans la console du navigateur lors de l'exécution du 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)
J'ai eu le même problème en travaillant avec Socket.IO v2. Mais l' ancienne solution ne fonctionne plus.
De plus, cette fois, même pas exécuter l'application Angular en production fonctionne.
Reproduction minimale
Vous pouvez l'essayer vous-même: flolu / angular-bazel-socketio3-issue
Courez yarn installet ensuite yarn dev. L'erreur se trouve dans la console du navigateur à l'adresse http: // localhost: 4200.
Et notez qu'il y a une autre erreur lors de l'exécution de l'application en production avec yarn prodà l'adresse 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
Réponses
Je n'ai aucune idée, pourquoi la solution de Sebastian ne fonctionne plus. engine.io-clientn'a pas beaucoup changé comme je peux le voir et il a encore plusieurs exigences "xmlhttprequest-ssl"qui devraient être remplacées par "../xmlhttprequest". Et c'est ce qu'il fait dans ce script. Mais mes node_modules ne changent pas après ce script, peut-être que je me trompe.
Mais de toute façon, ce qui a fonctionné pour moi, c'est de faire exactement la même chose mais via patch-package(je suis juste plus habitué à patcher node_modules).
En ce qui concerne le bundle de production, j'ai réussi à le faire fonctionner après avoir simplement supprimé l'excès de demande qui provoque l'erreur de production.
Cela dit, voici le patch final (mettez-le dans 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;
})();
N'oubliez pas non plus d'ajouter le patch-package à l'étape de post-installation:
"postinstall": "patch-package && ngcc"