Text-mask: Not working in Production (minifying/uglifying) Build REACT

[KevinGruber]

Hey,

We are using the repo in our project, and we came to the problem that when minifying and uglifying we get a error which says e.map is not a function.

We found out that the Package is already uglifyied and minified in npm.
So we believe that again uglifying is the problem. When we deactivate mangle in uglifyjs, then everything runs smooth. As i said the problem is only if uglifying with mangle true.

It is the only lib which gives us that error.

Maybe there is a already known solution for that.
We searched already but didn't find any.

Thx for the Help!

Best Regards,
Kevin

[johannboutet]

We are having the exact same problem with Angular 2. Our app is bundled with webpack but the uglifying is not activated for the dev environment.

When we use the [textMask] directive with a simple object like this, everything works fine.

// in the module.ts
import { TextMaskModule } from 'angular2-text-mask';

@NgModule({
...
imports: [
  ...
  TextMaskModule,
  ...
],
...

// in the component.ts ngOnInit()
this.amountMask = {
  mask: [/\d/, '.', /\d/],
};

// in the component.html
<input name="amount" id="amount" type="text" [textMask]="amountMask" [(ngModel)]="amount">

But when we use the createNumberMask addon, that's when the e.map is not a function error pops up.

// in the component.ts
import createNumberMask from 'text-mask-addons/dist/createNumberMask';

ngOnInit(): void {
  this.amountMask = createNumberMask({
    prefix: '',
    suffix: ' $',
    thousandsSeparatorSymbol: ' ',
    allowDecimal: true,
    decimalLimit: 2,
  });
  ...
}

Here is the stacktrace:

TypeError: e.map is not a function
    at n (textMaskCore.js?60d7:1)
    at n (textMaskCore.js?60d7:1)
    at Object.update (textMaskCore.js?60d7:1)
    at MaskedInputDirective.ngOnChanges (angular2TextMask.js?bc5a:40)
    at checkAndUpdateDirectiveInline (core.es5.js?3060:10891)
    at checkAndUpdateNodeInline (core.es5.js?3060:12382)
    at checkAndUpdateNode (core.es5.js?3060:12321)
    at debugCheckAndUpdateNode (core.es5.js?3060:13182)
    at debugCheckDirectivesFn (core.es5.js?3060:13123)
    at Object.View_BillingComponent_0._co [as updateDirectives] (BillingComponent.html:10)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js?3060:13108)
    at checkAndUpdateView (core.es5.js?3060:12288)
    at callViewAction (core.es5.js?3060:12653)
    at execComponentViewsAction (core.es5.js?3060:12585)
    at checkAndUpdateView (core.es5.js?3060:12294)

The error is the same wether I import createNumberMask from the minified version in text-mask-addons/dist/createNumberMask or the normal version from text-mask-addons/src/createNumberMask.

[dpcamp]

I'm running into the same exact issue running angular 4 with angular CLI. Any ideas how to work around this? I don't believe uglify is enabled in development

[tuliobraga]

@johannboutet and @dpcamp just change:

<input name="amount" id="amount" type="text" [textMask]="amountMask" [(ngModel)]="amount">

to

<input name="amount" id="amount" type="text" [textMask]="{mask: amountMask}" [(ngModel)]="amount">

It should work. Pay attention to [textMask]="{mask: amountMask}".

[dottodot]

I have the same issue but with the createAutoCorrectedDatePipe in Angular 4

  ngOnInit() {
    this.expMask = createAutoCorrectedDatePipe('dd/mm');
  }

 <input type="tel" [textMask]="{pipe: expMask, guide: false}" class="field" placeholder="DD / MM" formControlName="dob">

[vcebotari]

is there a solution for react build? i have same issue 'e.map is not a function'

[matneyx]

@440459012 -- https://github.com/text-mask/text-mask/issues/139#issuecomment-239919383

Replace your string mask with an array.