Use jquery plugin with Webpack

I'm trying to get this jquery plugin setup.

https://github.com/stevenwanderski/conditional-field

I've worked with plugins and webpack before, for example "jquery-mask-plugin" and I've been able to require it with require('jquery-mask-plugin'); and it works fine.

But this "conditional-field" plugin seems to be setup a little bit differently, so I'm not sure how to get it working.

I've tried requiring it in bootrap.js, but it throws an error. Any ideas?

//resources/assets/js/bootstrap.js
window.$ = window.jQuery = require('jquery');
require('jquery-mask-plugin');
require('conditional-field');

This dependency was not found:

* conditional-field in ./resources/assets/js/bootstrap.js

Swaz

9 years ago

Best Answer

Level 20

I was able to get the package found by adding the following to webpack.mix.js:

//webpack.mix.js
mix.webpackConfig({
    resolve: {
        alias: {
            'conditional-field': 'conditional-field/dist/conditional-field.js',
        }
    }
});

And now I have this in my bootstrap.js file:

//resources/assets/js/bootstrap.js
window.$ = window.jQuery = require('jquery');
require('jquery-mask-plugin');
window.ConditionalField = require('conditional-field');

But now I get a console error when I try to use the plugin on the page:

// index.balde.php
new ConditionalField({
    control: '.payment-radios',
    visibility: {
        'credit': '.credit',
        'check': '.check'
    }
});

Uncaught TypeError: ConditionalField is not a constructor

So I guess something about how this package was built doesn't play nice with webpack.

Please or to participate in this conversation.