Issues arising post transitioning to 14.0.0 from 13.0.0 version of ngx-masonry library leading to failed tests

Following the update to the latest stable version of the library ngx-masonry 14.0.0, our tests started failing. The release was just yesterday (24.10.2022) and you can find the changelog here: https://github.com/wynfred/ngx-masonry/blob/master/CHANGELOG.md

The major change they made was transitioning to Ivy build from ViewEngine in older versions. It seems like this error is related to the migration to the newer Angular compiler, as we are using Angular version 14 in our project.

After successfully updating with 

npm i <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b050c1346060a18040519122b5a5f455b"></a>
, there were no vulnerabilities detected.

To test it out, I ran ng test on my Angular application to ensure everything was functioning properly. The failing test was a basic one that checks if the component is being created. Several components that rely on the ngx-masonry library threw the following error: 

ReferenceError: require is not defined

https://i.sstatic.net/bgnqU.png

https://i.sstatic.net/PQZTw.png

Since this issue is still fresh (<24hrs old), more developers might encounter it when upgrading to version 14.

You can track the ongoing issue on their GitHub repository here: https://github.com/wynfred/ngx-masonry/issues/98

We may be overlooking something or perhaps there is an easy solution to this. :)

javascriptangulartypescriptnpmkarma-jasmine

Answer №1

The latest update for the library has been released by the owner, bringing it to version 14.0.1. Once you have executed 

npm i <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3aca6b985a6aabbb2aba6bf96b08c90">[email protected]</a>
, everything should be functioning properly again. All tests are passing as expected and the application compiles without any issues.

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

Change an ISO date format to DD:MM:YYYY HH:MM using Angular

I currently have my date in this format: 2022-11-21T21:07:56.830-07:00 However, I am looking to convert it to the following format: 21/11/2022 07:56 ...

angulartypescript

What steps do I need to take to set up CORS properly in order to prevent errors with

I encountered the following error message: "Access to XMLHttpRequest at 'api-domain' from origin 'website-domain' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HT ...

javascriptnode.jsexpresscors

Is it possible to personalize/modify the dropdown menu text?

Is it feasible to adjust the positioning and font color of my drop-down menu text? I aim to have the "title" section in black text on the left side and the "type" section in gray text on the right side of the drop-down menu. Currently, all the text is in ...

javascriptreactjsmaterial-uiautocomplete

Having difficulty accessing $scope beyond the function

One of the functions in my code is called getMail() $scope.getMail=function(){ $http.get(APISource). success(function(data) { $scope.mail =data; }). error(function(data) { console.log("error"); console.log(data); }); } In the succe ...

javascriptangularjs

Using ReactJS to Send Props Between Two Components

Currently, in my project, I am working on a payment form that conditionally renders 2 Stripe elements (PaymentRequestForm.js & CheckoutForm.js). While I have successfully passed down props from the main form component FullfillRequest.js to PaymentRequestFo ...

javascriptreactjs

Tips for altering the color of the MUI table sort label icon:

Does anyone know how to change the color of the table sort label icon from gray to red? I am having trouble figuring it out. Any recommendations or suggestions would be greatly appreciated. Here is the code I have been trying to work with: <TableSortL ...

reactjstypescriptmaterial-uistyling

How can I ensure that a button remains fixed at the bottom of a Material UI React Component?

I am currently working on developing a layout for a web application, and I have encountered an issue that I am struggling to resolve. The structure of my grid is as follows: https://i.sstatic.net/TEU2a.png My goal is to ensure that each section inside t ...

javascriptcssreactjswebmaterial-ui

What could be the reason for the absence of the loading sign in Chrome, even though it appears when the code is run on Firefox?

I implemented a function to display a loading screen on my HTML page with Google Maps integration. However, when I called the function popUpLoadingScreen() and dismissLoadingScreen() to show and hide the loading message while rendering map markers, the loa ...

javascripthtmlcss

React - the elusive nature of variable mutation

In my React app, there is a requirement to choose a specific version of a phone and then confirm the selection. Below is an excerpt from the React component's code: const App = () => { const [selectedVersion, setSelectedVersion] = useState(""); ...

javascriptreactjs

Keep the link underlined until a different button is pressed

I need help with a webpage that displays a list of partners organized by categories. When clicking on sidebar categories, the link remains underlined. However, if you click anywhere else on the page, the link becomes inactive. CSS: button:hover { t ...

javascriptjqueryhtmlcss

Ensure that only a single onmouseover event is triggered when hovering over multiple elements

I want to create a simple code snippet like the one below: <span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span> However, I need to ensure that when hovering ove ...

javascripthtml

Personalize or delete the spacing within an ion row

Currently, I am delving into the world of Ionic app development. Although I have grasped the concept of the Grid layout, I find myself hitting a roadblock when it comes to adjusting or removing spaces between rows 2 and 3 in my app interface, as illustrate ...

htmlcssangularionic-frameworkionic2

Unable to perform type casting in Typescript

I recently dived into the world of TypeScript by picking up a book titled Typescript Revealed (Published in February 2013). Chapter 2 caught my attention with a section on "Casts" featuring an intriguing example: var a : int = <int>SomeNumberAsAStri ...

castingtypescript

AngularJS directive for attributes. Steps for adding a second attribute directive during compilation phase

I am interested in creating an attribute directive that adds an icon to a button when it is disabled. Click here to see a similar example on Fiddle In addition, I would like to include the ng-disabled directive during the compile process (with the value ...

javascriptangularjsangularjs-directive

What is the reason behind the jQuery only functioning properly on Internet Explorer 8 on this particular page and no other browsers?

I recently created a webpage utilizing jQuery: The functionality on the page should change music images to represent different key signatures when switching from 'Higher Key' to 'Lower Key' in the combo box. While this works perfectly ...

javascriptjqueryhtmlcross-browser

Seeking an efficient localStorage method for easy table modification (HTML page provided)

Currently, I am in the process of developing a custom 'tool' that consists of a main page with a menu and several subpages containing tables. This tool is intended for composing responses using prewritten components with my fellow colleagues at w ...

javascripthtmllocal-storagejavascript-objectsgetelementbyid

CSS: Placing items within an ng-for loop utilizing the "fixed" position property

<ul class="nav nav-pills nav-stacked" style="list-style: none"> <li *ngFor="#el of dragZoneElems; #idx = index"> <h4 style="position: fixed; top:'idx'*10" [dragResponder]="el">{{el.first}} {{el.last}}</h4& ...

cssangularjsangular

Encountering an issue with a specific property not being defined in a spec

I am currently developing an Angular8 project and have set up jest and jasmine for testing purposes. .ts // all necessary imports are included @Component({ selector: 'app-xyz', templateUrl: './xyz.component.html', styleUrls: [& ...

angulartestingjasmine

To give an element a class in Javascript (without using jQuery) if it is currently hidden

Apologies if this question is not perfect, as I am still learning. I have been struggling to figure out how to add a class to an ID when the class is hidden using pure JavaScript (without jQuery). Below are my attempts so far: function hidekeep() { ...

javascript

Please convert the code to async/await format and modify the output structure as specified

const getWorkoutPlan = async (plan) => { let workoutPlan = {}; for (let day in plan) { workoutPlan[day] = await Promise.all( Object.keys(plan[day]).map(async (muscle) => { const query = format("select * from %I where id in (%L) ...

sqlnode.jstypescriptpostgresqlapi