How to import and use RobinHerbots' Inputmask in Aurelia

Question

I'm trying to use RobinHerbots' Inputmask in Aurelia but cannot seem to import it correctly.

I've come across people discussing using this plugin in Aurelia but I could not find specific documentation on how to do this.

After npm i inputmask --save this is what I have in my aurelia.json:

{
   "name": "inputmask",
   "path": "../node_modules/inputmask/dist",
   "main": "jquery.inputmask.bundle",
   "deps": [
      "jquery"
      ]
}

In my package.json I've declared inputmask.

"dependencies": {
//...
"inputmask": "^3.3.11",
//...
}

I see no errors running au build. However, when I import using ES6 I can't use any of its properties.

import Inputmask from "inputmask";

attached() {
     let im = new Inputmask('999-99-9999');
     let select = document.getElementById('social-security-number-field');
     im.mask(select);
}

Yields Unhandled promise rejection TypeError: inputmask_1.default is not a constructor and Uncaught TypeError: Cannot read property 'value' of undefined

Inputmask error in the console

When I try using the data-inputmask attribute it does not work either.

<input type="text" class="form-control" id="social-security-number-field" value.bind="ssn" data-inputmask="'mask': '999-99-9999'">

Input is not successfully masked using data-inputmask

Am I missing something? I have only had experience importing plugins that are expressly for Aurelia or state specifically that they can be used with Aurelia, so I could indeed be missing something vital.

Answer 1

That jquery.inputmask.bundle.js bundle isn't very compatible. They bundled it with webpack. It doesn't have any default exports and probably only works with webpack.

Try importing the regular build outputs:

{
   "name": "inputmask",
   "path": "../node_modules/inputmask/dist/inputmask",
   "main": "inputmask",
   "deps": ["jquery"]
}

This will require the other dependencies which you may need to include in your aurelia.json as well, but you'll get a proper warning if that's the case.

Edit:

You should also change your import statement from:

import inputmask from "inputmask";

to:

import * as inputmask from "inputmask";

inputmask doesn't have a default export, which is why that import statement won't work.