What is the proper way to import jquery.inputmask?

Question

I'm having trouble importing jquery.inputmask with webpack and TypeScript. There is some discussion at Question: build this with webpack/es6 #1115 :

Here's how i just set things up with jqlite

Import in your app like so:

import InputMask from 'inputmask';

to make the module available by that name you have to alias it and the dep lib

webpack config (using the jqlite dep lib, swap this out for jquery if you use that instead):

{
  // ... your config +
  resolve: {
    alias: {
      'inputmask.dependencyLib': path.join(__dirname, 'node_modules/jquery.inputmask/extra/dependencyLibs/inputmask.dependencyLib.jqlite.js'),
      'inputmask': path.join(__dirname, 'node_modules/jquery.inputmask/dist/inputmask/inputmask.js')
    }
  }
}

I have a similar webpack config with jQuery instead of jqLite as the dependency:

alias: {
    "inputmask.dependencyLib": path.join(__dirname, '../node_modules/jquery.inputmask/dist/inputmask/inputmask.dependencyLib.jquery.js'),
    "inputmask": path.join(__dirname, '../node_modules/jquery.inputmask/dist/inputmask/inputmask.js')
}

With import InputMask from "inputmask"; the TypeScript compiler throws an error:

error TS2307: Cannot find module 'inputmask'.

With import "inputmask"; I get a runtime error when calling $(element).inputmask(mask);:

TypeError: $(...).inputmask is not a function

Is there something wrong with the config, or is it a problem with the library itself?

Kimkimball

You have to put import "inputmask"; in your entry point and then you can import the elements of the module in your classes with import InputMask from "inputmask"; – Calque

@Calque I get the same TS2307 error when doing that. – Kimkimball

Answer 1

Over the weekend someone asked a similar question on GitHub, and a solution was posted too.

The full gist (with comments) can be found here. Two additional aliases are needed:

"jquery": path.join(__dirname, '../node_modules/jquery/dist/jquery.js'),
"inputmask.dependencyLib": path.join(__dirname, '../node_modules/jquery.inputmask/dist/inputmask/inputmask.dependencyLib.jquery.js'),
"inputmask": path.join(__dirname, '../node_modules/jquery.inputmask/dist/inputmask/inputmask.js'),
"jquery.inputmask": path.join(__dirname, '../node_modules/jquery.inputmask/dist/inputmask/jquery.inputmask.js')

Then to import the library, use import "jquery.inputmask";.

Kimkimball

Answer 2

Just in case you want to get it to run for newer versions of inputmask/jquery. Some things have changed for inputmask. I was able to get it work with the following code:

package.json:

"webpack": "^5.1.3",

"inputmask": "^5.0.5",
"jquery": "^3.5.1",

webpack model.exports:

resolve: {
  alias: {
    'jquery': _path('../node_modules/jquery/dist/jquery'),
    'inputmask': _path('../node_modules/inputmask/dist/jquery.inputmask'),
  },
},

ES6 import:

import 'inputmask';
import $ from 'jquery';

Rodmun