Webpack require or import: $.applyDataMask is not a function

[andreknieriem]

Have you take a look into our docs?

https://igorescobar.github.io/jQuery-Mask-Plugin/

Make sure your read this before opening a new issue:

https://github.com/igorescobar/jQuery-Mask-Plugin#problems-or-questions

Device

All

Browser (and version)?

All

Functional jsfiddle exemplifying your problem:

You can use this one as exemple: http://jsfiddle.net/igorescobar/6pco4om7/

Describe de problem depth:

Hey, when using with webpack I cannot get it to work properly. If I use import jquery-mask-plugin or require jquery-mask-plugin I get the error: $.applyDataMask is not a function. Can somebody tell me, what to do, to get this to work?

[mateusdeap]

I am having the same problem, except it is with the .mask function. This is in a Rails 6 project I migrated recently from Rails 5.2. All my other JS and CSS plugins work except for jquery-mask-plugin. I even tried to add the javascript directly to the application.js file, but it did not work...

[mateusdeap]

So I did some experimenting. To be clear, the error I'm getting is this one:

Currently, I have set up the javascript folder in my rails project as such:

I did this because I decided to follow a guide for migration in rails where the idea is to put all the custom javascript, css and images into the respective folders in the application folder and just add a require to the index.js for each one.

Somehow, I managed to make it work by including the jquery mask plugin javascript directly into the index.js of the javascript/application/javascripts folder. It will not work otherwise: I tried adding it in the application.js, tried making a seperate jquery_mask.js file in the packs folder and including it in application.js, tried doing the same in the application/javascripts folder and then putting an import in index.js but none of these approaches worked. It wouldn't work even if I put the jquery mask javascript in the same file as my custom javascript and then importing into the index.js

So, to be clear, I currently have this:

And I have the jquery-mask-plugin javascript pasted directly into the index.js that's in the javascript/application/javascripts folder. Now wverything is fine and I get my masks:

To be honest, I really don't have a clue why this is happening, nor do I know if this is an issue with webpack, rails or jquery-mask, however I hope this info may help somebody more knowledgeable to point out what might be the actual problem.

I also don't know if this is the same issue the OP has. If it isn't, I'll gladly open a different issue so as not to hijack this one by mistake....

[andreknieriem]

For me it worked with import '/path/to/file/jquery.mask.min'; with webpack. But I think your problem is something else. I close this issue for now