Issue with handsontable numbro library occurs exclusively in the production build

Encountering an error while attempting to add a row to my handsontable instance:

core.js.pre-build-optimizer.js:15724 ERROR RangeError: toFixed() digits argument must be between 0 and 100 at Number.toFixed () at h (numbro.min.js.pre-build-optimizer.js:1) at numbro.min.js.pre-build-optimizer.js:1

Full error details can be found here: https://i.stack.imgur.com/1hMN9.png

This issue only arises with the command ng build -prod (or using the --optimization flag).

Debugging is challenging due to the compiled JS, but after pinpointing it with console.log(), I identified the problematic handsontable call as:

hot.alter('insert_row');

Refactoring the project to include strict:true in tsconfig.json based on this handsontable compilation issue has proven to be quite laborious.

Any similar experiences or suggestions?

Versions in use:

  • Angular 7.2
  • Handsontable 7.0.0 (also observed in v6)
  • Typescript 3.2.4

No direct usage of the numbro library within my codebase; solely included as a dependency of handsontable (and not utilized by any other libraries in the project as well).

angulartypescriptnpmhandsontable

Answer №1

Indeed, the issue is not related to the Handsontable version but rather to one of its dependencies, Numbro in v2.1.2, which has caused a conflict with Webpack TerserPlugin (the default minifier).

To resolve this issue, Handsontable v7.0.1 will address it by downgrading the numbro dependency. Alternatively, you can manually install the fix now: 

npm i <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfa1baa2adbda08ffde1fee1fe">[email protected]</a>
and Handsontable will use your preferred version.

[1] https://github.com/BenjaminVanRyseghem/numbro/issues/402#issuecomment-471586507

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 command specified in the package.json "bin" could not be located by npx

I created a basic Node.js TypeScript application with two executable entries in the bin property of its package.json file. Here is an example of the package.json content: { "name": "test-npx-command", "version": " ...

node.jsnpmpackage.jsonnpx

Tips on capturing the response data in UI testing automation

Currently, I am working on automating a login page using WebDriverIO for UI Automation. After clicking the Login button, a request to *.com/user/login is triggered in the background. I need to capture this call's response in order to obtain a token r ...

javascriptnode.jsnpmwebdriver-io

The property 'dateClick' is not found in the 'CalendarOptions' type in version 6 of fullcalendar

Below is the Angular code snippet I am currently using: calendarOptions: CalendarOptions = { plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ], initialView: 'dayGridMonth', headerToolbar: { left: 'prev today next' ...

javascriptangularfullcalendarfullcalendar-6

Conditional type/interface attribute typing

Below are the interfaces I am working with: interface Movie { id: number; title: string; } interface Show { title: string; ids: { trakt: number; imdb: string; tmdb?: number; }; } interface Props { data: Movie | Show; inCountdown ...

typescript

Can diff coverage be implemented for Angular 9 projects?

Currently, I am working on utilizing Angular 9 for my front end and .Net CORE for the backend. Successfully implementing differential coverage for the backend project involved the following steps: Within my azure-pipeline.yml: - task: DotNetCoreCLI@2 ...

c#angularjestjsazure-pipelinestest-coverage

Issue with Angular2 wysiwyg component failing to submitThe Angular2

I'm currently in the process of familiarizing myself with angular2 by developing a sleek wysiwyg component. However, I seem to have reached an obstacle at this point. Below is the code I've been working on: The form that I am utilizing for testi ...

formsangularwysiwyg

Frontend Development with Angular 7+: A Modular Approach

I'm aiming to develop a frontend application that is modularized, allowing for the release of each module independently. However, I've run into an issue where creating angular modules for each frontend module requires building all modules togeth ...

angularangular2-modules

Processing tasks in Javascript, but new code is not being applied for updating

After making edits to my JS files, I noticed that my gulp task is no longer updating them live or writing new code. It was working fine before, but suddenly it stopped. I attempted to upgrade gulp to version 4, but this only led to more issues without res ...

npmgulp

WebStorm lacks support for TypeScript's `enum` and `readonly` features

When working with TypeScript in WebStorm, I encountered an issue where the IDE does not recognize enum or readonly. To solve this problem, I delved into TypeScript configuration files. I am currently utilizing .eslintignore, .eslintrc, tsconfig.json, and ...

typescriptwebstorm

Using *ngIf to verify the presence of an attribute

Currently working with Angular2 and trying to implement a condition to display something. For instance, if group.permissions=Can Create File, then something should appear on the page. This is the code I have written so far: <div class="col-md-9" *ngI ...

angular

Can my https.post function determine the specific API function to call?

Here is the code for my service file that interacts with mongoDB: import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { filter, isEmpty, map } from 'rxjs/operators'; import { ...

node.jsangularmongodbexpress

Struggling to extract the hours and minutes from a date in IONIC: encountering an error stating that getHours is not a recognized

I encountered an issue while trying to extract the hours and minutes from a date in Ionic. Below is the code snippet from my .html file : <ion-datetime displayFormat="HH:mm" [(ngModel)]='timeEntered1' picker-format="h:mm"></ion-date ...

angulartypescriptionic4

Loading a large quantity of items into state in React Context using Typescript

I am currently working on a React context where I need to bulk load items into the state rather than loading one item at a time using a reducer. The issue lies in the Provider initialization section of the code, specifically in handling the api fetch call ...

reactjstypescript

Error: "Branch not located upstream; will not be pushing."

When I use the np command, I receive the message "Upstream branch not found; not pushing." and it doesn't open the GitHub repo to draft a release. Why is this happening? https://i.stack.imgur.com/8hyn3.gif Currently, I am running np v5.0.3 on bash v ...

npm

Creating a dynamic navigation bar that adjusts to changing content requires careful planning and implementation

Struggling with achieving my visual mockup while designing a webpage: Check out my web design mockup Currently focusing on section 2 of the page. Using Angular 5, Bootstrap 3, and ngx-bootstrap library to integrate Bootstrap components into Angular. Here ...

htmlcssangulartwitter-bootstraptwitter-bootstrap-3

Is it possible to iterate through TypeScript using both keys and indexes?

Explained in detail at this link, TypeScript introduces a foreach loop: let someArray = [9, 2, 5]; for (let item of someArray) { console.log(item); // 9,2,5 } However, is there a way to access the index/key? I was thinking something along the lines of ...

for-loopforeachtypescript

Despite having installed v18.3, the Angular CLI specifically demands a minimum Node.js version of either v14.20, v16.14, or v18.10

Today I decided to upgrade my Angular CLI from v14.1 to v16. After upgrading, I encountered an issue every time I tried to run ng, which indicated that the CLI required a minimum version of node.js: The Angular CLI requires a minimum Node.js version of ei ...

node.jsangularangular-cli

An abundance of Inodes utilizing Node.js

This query pertains to programming, with a focus on server administration. Presently, my server has 256K INodes at its disposal, which should be sufficient. However, I am faced with the challenge of managing 5 projects on this server, each with numerous n ...

linuxnode.jsnpmnpm-installinode

Adjusting box width based on device type: desktop and mobile

I'm currently working on a form that includes several mat-form-fields. I have set the width of these items to 750px, but this does not work well for mobile devices. I am trying to figure out how to make the form or mat-form-field automatically adjust ...

cssangularflexboxangular-material

The Node.js version varies between PhpStorm and Ubuntu environments

Following an update to node, I noticed that my PhpStorm terminal is still displaying the older version while my Ubuntu terminal reflects the updated one. This became a problem when both npm start and npm install failed due to incompatible node versions. ...

node.jsnpmterminalphpstormubuntu-22.04