Inputmask: Question: build this with webpack/es6

[Bogdaan]

Hi, i use webpack as build system. But unable to build this plugin

My code

import jQuery from 'jquery'
import Inputmask from 'jquery.inputmask'

let im = new Inputmask(maskOpts)
im.mask(inputElementRef)

But always fail on client-side with error:
"this.each is not a function"
$.fn.inputmask.$.fn.inputmask @ jquery.inputmask.js:52

Im not familiar with AMD loader. it posible build this with webpack?

[RobinHerbots]

@Bogdaan ,

I never heart of webpack before, ...

I guess it is also using some mechanism like amd or commonjs. I guess it is missing the dependencyLib for jquery.

Do you need to specify some config before been able to pack (bundle) ? Have a look at the readme for using the plugin with a module loader.

[nathanmarks]

@RobinHerbots @Bogdaan

Not sure if this is your problem bogdaan as I'm not trying the jquery implementation. Are you loading the dependency lib?

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')
    }
  }
}

[Bogdaan]

@nathanmarks thanks, i'm load wrong module in import directive (alias works)

[nathanmarks]

@Bogdaan I'm actually getting the same error now that I'm trying it.

TypeError: $.each is not a function
    at Object.Inputmask.mask (http://localhost:8080/app.bundle.js:94001:60)
    at link (http://localhost:8080/app.bundle.js:92710:18)
    at invokeLinkFn (http://localhost:8080/app.bundle.js:16967:10)

Did you figure it out?

[nathanmarks]

@RobinHerbots I haven't dug into the code yet but $.each is not a valid jqLite method and I don't see it in the dependencylib module.

[nathanmarks]

@Bogdaan @RobinHerbots I ended up just using the vanilla lib. The jqLite lib needs a .each method

[RobinHerbots]

@nathanmarks ,@Bogdaan,

The jqlite dependencylib is not complete!! I was expecting some PR from @mfeingold, with an implementaion for jqlite. . See #517.

[Bogdaan]

@nathanmarks yes, jqlite is not complate, i use jquery in dependencyLib

[RobinHerbots]

@Bogdaan , @nathanmarks ,

jqlite dependencylib implemented and working ;-) Have a try

[whooehoo]

Hi!
I have a problem with es6 and jquery.inputmask: inputmask added one more jquery in project. Why?

include:
require('jquery.inputmask');

webpack config:
'jquery.inputmask': path.join(__dirname, 'node_modules/jquery.inputmask/dist/jquery.inputmask.bundle.js')

[RobinHerbots]

@whooehoo ,

The phone extensions which is included in the jquery.inputmask.bundle.js requires jquery.

Include only the extensions you need.

[whooehoo]

@RobinHerbots Thx for the answer, but my problem not solved 😕
I need jquery.inputmask, but jquery.inputmask.js also added one more jquery(i think line 9 in this file).
Should I create own jquery.inputmask.js or ..?

include:
require('inputmask');
require('jquery.inputmask');

webpack config:
'inputmask': path.join(__dirname, 'node_modules/jquery.inputmask/dist/inputmask/inputmask.js'),
'inputmask.dependencyLib': path.join(__dirname, 'node_modules/jquery.inputmask/extra/dependencyLibs/inputmask.dependencyLib.js')

[RobinHerbots]

@whooehoo ,

You don't need jquery.inputmask.js It is only a jquery plugin wrapper. Inputmask.js is enough todo all.

[ksrb]

@whooehoo a month late but if you are still trying to get jquery.inputmask to work with webpack here's a 'basic' gist that works.

[andersonf78]

@ksrb Thanks a ton! Works like a charm!

[Vaccano]

@ksrb - Thank you so much for posting that example! I would have been a very long time figuring that one out!

[ksrb]

@Vaccano happy to hear it works for you too I've made a small update to the gist that's relevant if you're using extensions, in the index.js file:

import 'jquery.inputmask';
// Add extensions as necessary make sure you remember to add the corresponding aliases in the webpack config
import 'inputmask.numeric.extensions';
import $ from 'jquery';
// ...

[RobinHerbots]

@ksrb ,

Thx for your support on this

[versedi]

This way of doing it breaks SentryWebpackPlugin sourcemap file names hashes.

@RobinHerbots is there any hope this would be solved in different way?

EDIT: This is caused by few things actually: Usage of webpack encore with autoprovide jquery. Make sure to configure your resolve.alias accordingly!

[RobinHerbots]

@versedi ,

Is this still actual? Which version do you use?

[versedi]

@RobinHerbots actually I resolved it by using slightly different settings in webpack.conf.js in my Symfony/Encore based project.

Following works and doesn't break Sentry sourcemap file name hashes:

config.resolve.alias = {
    'inputmask.dependencyLib': path.resolve(
        __dirname,
        'node_modules/jquery.inputmask/dist/inputmask/inputmask.dependencyLib',
    ),
    // Allows use of jquery input mask via jquery chaining api/$('selector').inputmask(...)
    'jquery.inputmask': path.resolve(__dirname, 'node_modules/jquery.inputmask/dist/inputmask/jquery.inputmask'),
};

This was probably caused by using Encore function autoProvideJquery which also does resolve.alias manipulation and sets each own global jquery.