typescriptwebpackjquery-inputmask

What is the proper way to import jquery.inputmask?


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?


Solution

  • 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";.