Skip to content

$.fn.inputmask undefined by webpack building #2839

@kingleonide

Description

@kingleonide

Hello!
I needed to make Flatflickr work with Inputmask.
Through the debugger, I wanted to understand why the input field was being cleared. I decided to build my own version, debug it, and if necessary, bundle it with Webpack.
Previously, I was using Flatflickr and Inputmask via CDN on the page.

I downloaded the source code from Git, placed it in the folder src/assets/js/libs/Inputmask/, and decided to build it.

"jquery": "webpack --progress --watch --config-name jquery --config webpack.config.js"

I got the following output files:

src/assets/js/libs/Inputmask/dist/jquery.inputmask.js
src/assets/js/libs/Inputmask/dist/jquery.inputmask.js.map
src/assets/js/libs/Inputmask/dist/jquery.inputmask.min.js
src/assets/js/libs/Inputmask/dist/jquery.inputmask.min.js.map
In my project, I do it like this:

import axios from 'axios';
import $ from 'jquery';
import moment from "moment";
window.$ = window.JQuery = $;

import Inputmask from './libs/inputmask/dist/jquery.inputmask.js';

$.fn.serializeObject = function(){
var serializedArray = this.serializeArray()
return serializedArray.reduce((result, input) => {
return {...result, [input.name]: input.value}
}, {})
}

console.log('$', $);
console.log('jQuery', jQuery);
console.log('Inputmask', Inputmask)
console.log('$.fn.inputmask', $.fn.inputmask)

$ ƒ ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery…

jQuery ƒ ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery…

Inputmask {__esModule: true, default: ƒ}
$.fn.inputmask undefined

Image

I even tried connecting bundle.jquery.js. Naturally, I wanted to get $.fn.inputmask > function, but instead, it was undefined.

What am I doing wrong?

  • Inputmask version 5.0.10-beta.37

System:
OS: Windows 10 10.0.19045
Binaries:
Node: 20.17.0
npm: 10.8.2
Browsers:
Edge: Chromium (131.0.2903.70)
Packages:
babel-loader: ^10.0.0 => 10.0.0
grunt-webpack: ^7.0.0 => 7.0.0
webpack: ^5.98.0 => 5.98.0
webpack-cli: ^6.0.1 => 6.0.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions