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

Utilize the key types of an object to validate the type of a specified value within the object

I am currently working with an object that contains keys as strings and values as strings. Here is an example of how it looks: const colors = { red: '#ff0000', green: '#00ff00', blue: '#0000ff', } Next, I define a type ...

typescript

Organize information in a React table following a predetermined sequence, not based on alphabetical order

As a beginner with React, I'm looking to sort my data by the column "Status" in a specific order (B, A, C) and vice versa, not alphabetically. The data structure looks like this: export interface Delivery { id: number; name: string; amount: num ...

javascriptreactjstypescripthtml-table

Modify the internal class style to set overflow property to visible for a particular class in PrimeNG

Looking for a way to customize the styles of PrimeNG or Angular2 components? The documentation may be lacking clarity, but you can find more information at this URL: http://www.primefaces.org/primeng/#/dialog So, how do you actually go about changing the ...

cssangularprimeng

Tips for creating a TypeScript-compatible redux state tree with static typing and immutability:

One remarkable feature of TypeScript + Redux is the ability to define a statically typed immutable state tree in the following manner: interface StateTree { readonly subState1: SubState1; readonly subState2: SubState2; ...

javascripttypescriptredux

Obtaining the IP address upon page load in Angular 4: A step-by-step guide

In the midst of my Angular4 project, I'm on a mission to fetch the system IP address upon page load and send it over to the API for storage in a MSSQL database. However, each time the page loads, two rows are inserted and the IP address is coming up a ...

angularangular4-httpclient

Error: The nested property of the dynamic type cannot be indexed

Within my coding project, I've devised an interface that includes various dynamic keys for API routes, along with the corresponding method and response structure. interface ApiRoutes { "auth/login": { POST: { response: { ...

typescripttypescript-generics

Issue with installing chromedriver and selenium-driver on Windows 7 using NPM arise

I have a relatively basic package.json file with some development dependencies included. Here is what it looks like: "devDependencies": { "cssnano": "3.3.2", "cucumber": "0.9.2", "diff": "2.2.0", "grunt": "0.4.5", "jit-grunt": "0.9.1", " ...

node.jsseleniumnpmselenium-chromedrivernpm-install

Using Iframe for WooCommerce integration and implementing Facebook login within an Ionic application

I have created an Ionic application that includes an iframe from a Wordpress website. Here is the code snippet from my home.page.ts file: import { Component } from '@angular/core'; import { DomSanitizer } from "@angular/platform-browser"; @Com ...

angularwordpresstypescriptionic-frameworkwoocommerce

The malfunctioning collapse feature in Bootstrap 4 sidebar within an Angular 6 application

I am trying to find a way to collapse and reopen the sidebar when clicking on a button. I have attempted to create a function to achieve this, but unfortunately it did not work as expected. Important: I need to collapse the sidebar without relying on jque ...

angulartypescriptbootstrap-4angular6

Having issues with referencing external JavaScript and CSS files in Angular 6

Dealing with an angular6 project and a bootstrap admin dashboard template, I'm facing issues importing the external js references into my Angular application. Looking for guidance on how to properly import and refer to external Js/CSS files in an angu ...

javascriptcssangularangular6

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)

My input HTML field is disabled, but I've noticed that in some browsers (such as Chrome, Edge, Internet Explorer, and Opera), it's still possible to select and copy the text. However, in Firefox, this functionality does not work. To test this yo ...

javascripthtmlcssangular

The utilization of *ngTemplateOutlet for conditional rendering is experiencing issues when used within a formGroup

Developed a reusable form input designed to be displayed within a form either as part of a parent formGroupName or independently as a regular input control. The code implementation is: child.component.html: <ng-container *ngIf="hasFormGroup; then f ...

angularrxjsangular-reactive-formsform-controlng-template

What is the process for updating information once the user has verified their email address on Supabase using Next.js

After a user signs up using a magic link, I want to update the profiles table in my database. Below is the code snippet I am currently using: Login.tsx import { useState } from "react"; import { supabase } from "../lib/initSupabase"; c ...

reactjstypescriptauthenticationnext.jssupabase

Transforming Gulp functions into Npm's commands

After using Gulp for some time, I recently learned a way to execute certain Gulp tasks like browserify/watchify/less through the scripts in package.json. For instance: "scripts": { "watch": "npm run watch-js & npm run watch-less & npm run watc ...

node.jsnpmgulp

Dealing with throwing Exceptions in jest: A guide for developers

I have developed a method that throws an exception when the provided password does not match a regex pattern. I attempted to handle this in Jest. it('Should prevent insertion of a new user if the password doesn't match the regex', async () ...

javascripttypescriptexceptionjestjsnestjs

Tips for passing a Typescript variable in a jquery callback function

Within an Angular 6 component, I am utilizing a jQuery callback function. This component contains a TypeScript variable, and when a click event occurs on the webpage, the callback function is triggered. However, I am struggling to figure out how to pass th ...

jqueryangularnodes

Programmatically click a button from the library by triggering a click on its outer div using Angular

Currently, I'm just starting out with Angular. I've been using the @abacritt/angularx-social-login package and noticed that the Google button it provides is only an icon. I'd like to customize its appearance by placing the icon inside a div ...

angulargoogle-authenticationviewchild

Having difficulty accessing an element within ng-template during the unit test writing process with Jasmine

I am encountering an issue when trying to access a button inside an ng-container in my testing environment. Despite manually setting the value of the ngIf condition to true, the elements inside are not being rendered. Here is what I have attempted so far: ...

angulartypescriptunit-testingjasminekarma-jasmine

Saving information obtained through Angular subscribe into a variable

One of the services I have is called getWeather, which contains a method that communicates with an API using longitude and latitude parameters and then returns the response: import { Injectable } from '@angular/core'; import { HttpClient } from ...

angularasynchronous

I'm stuck dealing with the ECONNRESET error while using npm. The only solution I've found so far is to restart my computer every time it

Recently, I've been encountering an issue where I am unable to use npm install on my computer after using it for a while. However, if I restart the computer, everything starts working again. I am currently using macOS Mojave 10.14.3 with node v11.12. ...

node.jsnpm