Combining Bazel, Angular, and SocketIO Led to: Unforeseen Error - XMLHttpRequest Not Recognized as Constructor

I am looking to integrate ngx-socket-io into my Angular application. I utilize Bazel for running my Angular dev-server. Unfortunately, it seems that ngx-socket-io does not function properly with the ts_devserver by default. Upon checking the browser console, I encountered the following error:

Uncaught TypeError: XMLHttpRequest is not a constructor
    at ts_scripts.js?v=1587802098203:16776
    at Object.23.../transport (ts_scripts.js?v=1587802098203:16780)
    at o (ts_scripts.js?v=1587802098203:11783)

This issue appears to be related to xmlhttprequest-ssl, which is a dependency of engine.io-client and is required by ngx-socket-io. However, this problem specifically arises when using the ts_devserver. Operating the Angular app in production mode works perfectly fine.

Minimal Reproduction

To replicate the issue, you can follow these steps: https://github.com/flolu/bazel-socketio-issue

Simply run yarn install followed by yarn dev (this will trigger the error in the browser console @ http://localhost:4200). Additionally, please note that running yarn prod @ http://localhost:8080 functions without any issues!

Edit 1

There currently appears to be an additional complication on Windows. Therefore, the example repository can only be tested on Mac or Linux systems.

angulartypescriptsocket.iobazel

Answer №1

The issue originates from the utilization of engine.io-client within socket.io-client:

During the build process of socket.io-client as a UMD module triggered by:

"@npm//socket.io-client:socket.io-client__umd",

in the BUILD.bazel file, the browser key in engine.io-client/package.json:

"browser": {
   "ws": false,
   "xmlhttprequest-ssl": "./lib/xmlhttprequest.js"
},

appears to be disregarded.

Consequently, the require('xmlhttprequest-ssl') statements in 

node_modules/engine.io-client/lib/transports/*.js
persist in the UMD build. Since xmlhttprequest-ssl is designed for headless Node environments and not compatible with browsers, an error occurs.

No definitive cause/issue explanation was found; however, a resolution was discovered (not to be viewed as a temporary fix):

Rework engine.io-client with a postinstall script:

  1. install the shelljs package: yarn add -D shelljs
  2. update the postinstall section in package.json to: 
    "postinstall": "node --preserve-symlinks --preserve-symlinks-main ./postinstall-patches.js && ngcc"
  3. insert the provided code into postinstall-patches.js at the project root:
try {
  require.resolve('shelljs');
} catch (e) {
  ...
});

const {set, cd, sed, ls} = require('shelljs');
const path = require('path');
const log = console.info;

...

(Source: , referencing the example at https://github.com/angular/angular/blob/master/tools/postinstall-patches.js)

  1. yarn install
  2. yarn dev

I will soon create a pull request for your GitHub repository.

Potential alternatives that were unsuccessful:

  • utilize 
    socket.io-client/dist/socket.io.js
    along with an extra "UMD shim" due to it being an "anonymous UMD" module, OR
  • experiment with some npm_umd_bundle techniques

Refer to issue Every new npm dep needs a unique approach how to add it to ts_devserver #1055 on bazelbuild/rules_nodejs for more insights on both methods.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue encountered is a ReferenceError - the variable io is not defined at line 40 of the

var express= require("express") var bodyParser=require("body-parser") var app= express() var http=require('http').Server(app) var io=require('socket.io')(http) app.use(express.static(__dirname)) app.use(bodyParser.json()) app.use(body ...

node.jsexpresssocket.io

The service functions are being called two times consecutively

I am utilizing an authentication component @Component({ selector: "oe-authentication-view", templateUrl: "./authentication-view.component.html" }) export class AuthenticationViewComponent implements OnInit { authorizationFormGroup: FormGroup; ...

angular

Client.on facing issue with receiving data upon initial connection

Currently, I am utilizing the net module in order to establish a connection between my client and server. Below is the code snippet: const Net = require('net'); client = Net.connect(parseInt(port), host, function() { co ...

javascriptnode.jstcpsocket.io

Creating a standard arrow function in React using TypeScript: A Step-by-Step Guide

I am currently working on developing a versatile wrapper component for Apollo GraphQL results. The main objective of this wrapper is to wait for the successful completion of the query and then render a component that has been passed as a prop. The componen ...

reactjstypescriptgenericsreact-apolloreact-functional-component

I am seeking guidance for developing my own messaging platform, similar to Discord, using Typescript

Allow me to simplify this for you. This piece of code outlines TypeScript interfaces and namespaces for a WebSocket API that is commonly used in a chat or messaging system. It seems to define the format of messages being exchanged between a client and ser ...

typescriptmacos

How to perform a fetch on a local path in Next.js?

Is there a way to use the fetch method with a relative path like this: export async function getServerSideProps() { // Fetch data from local API const res = await fetch(`/api/get_all_prices`) const data = await res.json() // Pass data to th ...

typescriptnext.js

Reduce the use of if statements

Is there a way to optimize this function by reducing the number of if statements? The currentFeatures are determined by a slider in another file. The cost is updated if the currentFeatures do not match the previousFeatures, and if the user changes it back ...

javascriptreactjstypescript

What determines the narrowing of a type when it is defined as a literal versus when it is returned from a function?

I'm really trying to wrap my head around why type narrowing isn't working in this scenario. Here's an example where name is successfully narrowed down: function getPath(name: string | null): "continue" | "halt" { if (n ...

typescriptnarrowingtype-narrowing

Angular 8: ngx-socket-io changes the connection URL while in production mode

One issue arises when running the application in production mode. In development mode, the socket client successfully connects to http://localhost:3002/socket.io/?EIO=3&transport=polling&t=N4--_Ms. However, in production mode, the URL changes to ht ...

node.jsangularsocket.io

What is the best way to pause function execution until a user action is completed within a separate Modal?

I'm currently working on a drink tracking application. Users have the ability to add drinks, but there is also a drink limit feature in place to alert them when they reach their set limit. A modal will pop up with options to cancel or continue adding ...

javascriptreactjstypescriptreact-native

Tips for troubleshooting TypeScript Express application in Visual Studio Code

Recently, I attempted to troubleshoot the TypeScript Express App located at https://github.com/schul-cloud/node-notification-service/ using Visual Studio Code. Within the launch.json file, I included the following configuration: { "name": "notifi ...

node.jstypescriptexpressvisual-studio-code

Setting up NestJs with TypeORM by utilizing environment files

In my setup, I have two different .env files named dev.env and staging.env. My database ORM is typeorm. I am seeking guidance on how to configure typeorm to read the appropriate config file whenever I launch the application. Currently, I am encountering ...

javascriptnode.jstypescriptnestjstypeorm

Creating a unique theme export from a custom UI library with Material-UI

Currently, I am in the process of developing a unique UI library at my workplace which utilizes Material-UI. This UI library features a custom theme where I have integrated custom company colors into the palette object. While these custom colors work perfe ...

javascriptreactjstypescriptmaterial-ui

Angular throwing an error message: "ChildrenOutletContexts provider not found!"

I developed a basic testing application and encountered the error message - "No provider for ChildrenOutletContexts!" I have searched through various related posts but to no avail. Here is my project structure: The App Module contains the App Routing Modu ...

angulartypescriptroutesangular-ui-routerangular2-routing

Asserting types for promises with more than one possible return value

Struggling with type assertions when dealing with multiple promise return types? Check out this simplified code snippet: interface SimpleResponseType { key1: string }; interface SimpleResponseType2 { property1: string property2: number }; inter ...

javascripttypescriptpromise

Warning: The use of the outdated folder mapping "./" in the "exports" field for module resolution in the package located at node_modulespostcsspackage.json is deprecated

I recently upgraded my Node to version 16 and since then I have been encountering this issue while building my Angular app. Warning: The folder mapping "./" used in the "exports" field of the package located at ".../node_modules/postcss/package.json" is de ...

javascriptnode.jsangulartypescript

What sets apart an Angular component from a module?

After watching numerous videos and reading various articles, I came across this particular article that left me feeling confused. In the beginning of the article, it mentions: In Angular, applications are structured in a modular way. Each Angular app consi ...

angularmodulecomponents

Using Next.js, it is not possible to use absolute imports within SASS

Having trouble utilizing @/ imports within my scss files. The variables I need are stored in src/styles/_variables.scss Here is my tsconfig.json: { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "baseUrl": ".", "allowJs": tr ...

typescriptnext.jssass

A guide on capturing the text content of the error message from the <mat-error> element with Protractor

I have encountered an element that is giving me trouble in retrieving the error message text into a variable. <mat-error _ngcontent-c16="" class="mat-error ng-star-inserted" id="error-email-required" role="alert" ...

angulartestingprotractorautomated-testse2e-testing

Angular 13.0 version is experiencing issues when trying to run the "ng serve" command

After installing the npm module, I encountered a problem while using node.js version 14.17.6. I am a beginner in Angular and struggling to find a solution due to not using the latest Angular CLI version. Any help would be greatly appreciated. Thank you in ...

javascriptnode.jsangularnpm