The LoaderRunner callback was triggered by the bootstrap version ^3.4.1 before

I encountered a surprising error while using the Azure Build pipeline, specifically in the loadrunner.js file. The error message from the pipeline is: "The callback was already called".

C:\Windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npm.cmd" run build:prod"
D:\a\31\s\node_modules\loader-runner\lib\LoaderRunner.js:106
            throw new Error("callback(): The callback was already called.");
                  ^
Error: callback(): The callback was already called.
    at context.callback (D:\a\31\s\node_modules\loader-runner\lib\LoaderRunner.js:106:10)
    at D:\a\31\s\node_modules\css-loader\dist\index.js:137:5
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I successfully built the same code on January 31, 2023 without any errors. However, during the production push, this issue surfaced. I have been trying to troubleshoot and find a solution since then.

Here is a screenshot for reference:

https://i.stack.imgur.com/VPCVc.png

In my attempts to resolve the issue, I upgraded the bootstrap version to 5.0 and above. While this allowed the build to succeed, it caused issues with the UI. My Angular version is 9.2.X, and the bootstrap version specified in my package.json is ^3.4.1.

Another user has reported a similar loadrunner issue on Stack Overflow, but the suggested solution did not work for me.

I am concerned about the Bootstrap ^3.4.1 library, as it has been heavily downloaded from the nodejs website in recent days. Could there be an issue with this particular version?

Note that although upgrading Angular resolved the problem, it is currently not a viable option for me. What other solutions can I explore?

Additionally, here are the details of the pipeline configuration (All jobs include custom commands):

Cache Clean:- Task Version 1.*, command: cache clean --force

Npm update:- Task Version 1.*, command: update --force

Npm install:- Task Version 1.*, command: install --legacy-peer-deps --force

Npm build:- Task Version 1.*, command: run build:ps

It's worth noting that our angular version was upgraded from 6 to 9, leading to the inclusion of the npm update command in the pipeline.

The pipeline successfully completes all steps but encounters a failure during npm build.

Answer №1

If you're facing the same issue, you might want to give this solution a shot:

  1. Start by adding the "Node.js tool installer" as the initial build step within the Agent job that includes your Angular build step. It's crucial to ensure that it is included in the same Agent Job as the Angular build step and not within the "Configure Agent" agent job. Failing to do so may result in incorrect configuration.

  2. Next, update the "Version Spec" field of the Node.js tool installer with the version of Node that you know works on your local machine. To determine your version, simply run "node -v" on your local console. For example, 16.17.0

  3. Additionally, make sure that the "Check for Latest Version" option is unchecked.

Hoping that these steps prove helpful in resolving this frustration-inducing issue.

Answer №2

Similar situation occurred to me as it did for @Nieldev. I spent hours double-checking these steps to ensure everything was functioning properly. However, @Nieldev beat me to the solution :)

The default npm version changed unexpectedly in the Azure pipeline - my previously successful run utilized npm version 8.19.3, but it was updated to 9.3.1.

It took a while to pinpoint the issue, but after some investigation, I found the same resolution as others. The key was to align the npm version with the one that worked in the pipeline.

1. Added Node Tool Installer and switched the task version to 1.*, as Task version 0.* was still referring to node 6 by default. Task version 1.* defaults to Node version 10 and above.
 
2. Updated the Version field to specify a particular version - in my case, 16.19.0.

3. Make sure not to leave "Check for Latest Version" checked.

This issue was incredibly frustrating, especially since something that had been working flawlessly for months suddenly failed during production deployment - it's quite disheartening.

I hope this post can assist others facing similar challenges.

Answer №3

After encountering a similar issue, I was able to resolve it by reverting back from v18.19 to v16.20.2 and utilizing

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284658456810061911061c">[email protected]</a>
.

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

Customizing the Style of Mat-Form-Field

I have designed a search bar using mat-form-field and attempted to personalize the appearance. Currently, there is a gray border-like region surrounding the input field and icons. Moreover, clicking on the input field results in a visible border: <form ...

Is the presence of an excessive number of arguments in the object that includes functions an instance

In my program, I have implemented a feature where the user can provide an array to determine which functions are executed in a loop. However, managing the list of variables that need to be passed into each function has become challenging as the list keeps ...

keeping variables hidden from the user until a certain action is taken

In my project, I am working with three main code classes: 1) node.js (utilizing express framework) 2) index.html (serving as the home page when users visit the site) 3) sck.js which performs a specific function (details to follow on the first and second fi ...

JavaScript rearrange array elements

Currently, I'm attempting to move the values of an array over by a random amount. For instance: var array = [1,2,3,4]; var shiftAmount = 1; The goal is to shift the array so that it looks like [4,1,2,3] ...

Heroku deployment hiccup

image description goes here at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=thawing-harbor-62063.herokuapp.com request_id=f660858a-37c6-4a77-8940-cd7ca253bb6c fwd="76.164.216.25" dyno= connect= service= status=503 bytes= protocol=h ...

Unable to assign a value to the property of the socket.io handshake object

I am attempting to include a custom attribute in a socket.io handshake and transfer it to the socket object upon each connection. Below is a basic outline of my approach: var app = express(); var http = require("http").Server(app); var io = require("soc ...

What alternatives are available to eliminate the need for body-parser?

After successfully installing the express module and body-parser, I realized that I can now utilize express to gather all necessary information from the user without the need for body-parser. How can I safely remove body-parser from my configuration? cli ...

Unleashing the Potential: A Guide on Reinstating the Dialog.Delegate Directive into

I need assistance in creating a straightforward multi-turn dialog using the Alexa Skill model. My intent comprises of three slots, all of which must be filled to fulfill the intent. I have provided prompts for each slot and defined all necessary utterances ...

Using iOS to send a request - Receiving a response with a 304 HTTP status code from

I am currently in the process of developing an application specifically designed for iPad users. To create this app, I am utilizing Express and a restful approach as the backend framework. The code snippet below demonstrates how Express should respond on t ...

Attempting to download an image through an axios fetch call

There is an issue I am facing while trying to retrieve an image from the website www.thispersondoesnotexit.com. function getImage() { axios({ method: 'get', url: 'https://www.thispersondoesnotexist.com/image' }) ...

Employing the `instanceof` operator on instances generated by constructors from complex npm dependencies

Context: In one of my npm modules, I've implemented error handling code with a custom error type called CustomError: function CustomError () { /* ... */ } CustomError.prototype = Object.create(Error.prototype); CustomError.prototype.constructor = Cu ...

Display information on the console from any location

I'm working on a Node.js project where I need to display text at specific locations, such as the top right corner. Is there a Node.js module available that can help me achieve this? Something like: var displayModule = require('display_module&ap ...

Tips for updating the route using NPM serve

Hey there! I'm currently experimenting with the serve npm package. My goal is to serve static files on a different route. Here's an example of the directory structure I want to serve: index.html index.js helpers helper.js I've been tryi ...

Is the undefined Mongoose error message appearing?

I'm currently testing my database connection using jasmine. The MongoClient object is defined, but when err returns undefined, it causes my test to fail. Does Mongoose always return undefined if there's no error? Is there an alternative method ...

Could not locate the command "express" - perhaps it is not installed

I've tried multiple times to install Express, but all I get is the error mentioned in the title. Any assistance would be greatly appreciated. Here are the commands I have attempted. While my current directory is where I want the application to be loc ...

Issue with esbuild not executing within docker compose configuration

Currently, I am new to using esbuild and struggling to set up a script that can watch and rebuild my files. Additionally, I need this functionality to work within a docker environment. Within my package.json file, the following scripts are defined: " ...

"Differences between a .js server, webpack, and how to plan

I'm feeling a bit overwhelmed. I recently started delving into node.js with the MEAN stack after previously using webpack and browserify without fully grasping their concepts. What's really puzzling me is the following: Express starts a server ...

How to execute a function when a Service Variable changes in Angular 14?

I have 2 components and a Service that I would like to connect in the following way: Component 1 triggers a function inside Service when clicked Service retrieves data from an API and stores it Component 2 fetches the stored data and displays it ...

Reactive form enabled for Angular control

In order to meet the required format for a social security number input field using reactive forms, it must adhere to the following conditions: The format should be ###-##-####. Limited to 9 digits without including the dashes (11 characters with dashes) ...

Is there a reason why the layout.jade isn't functioning properly?

I have encountered an issue with my configure file: The layout.jade is not working properly, even though the jade itself is functioning correctly. I have verified this using Chrome and confirmed that the layout HTML is not being loaded into the page. modu ...