I can't use iziModal with webpack

[dvelazdiaz]

When I try to load iziModal like a module with require('izimodal') I got an error:

$(...).iziModal is not a function

I'm using izimodal 1.5.1 and jquery 3. Also I'm loading jquery with webpack ProvidePlugin

        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })

Any help? Cheers

[andrew-zachary]

you have to force iziModal to use ur jquery version by :
resolve: { alias: { 'jquery': require.resolve('jquery'), } }

[dvelazdiaz]

Thanks for your response. I already fixed my issue loading iziModal from bower instead npm

[RyanGosden]

I am experiencing the same issues as I had to change the way jQuery was being loaded.
(by using the ProvidePlugin)

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })

alias: { 'jquery': 'jquery/src/jquery',

I've tried require('izimodal'), also storing the require to a variable.
No luck as of yet.

Anyone else have this issue?

[Designer023]

Ok, none of this worked for me, but what eventually did was:

    import iziModal from 'izimodal/js/iziModal';
    // Initialise imported function as jQuery function
    $.fn.iziModal = iziModal;
    // Use function as normal
    $("#modal").iziModal();

[tr1s]

@Designer023 this half helped.

The error went from iziModal not being a function, to iziModal not being defined. But everything works if I just use a CDN, so I know my js works. What am I doing wrong?

This is my js

$(function () {
  $.fn.iziModal = iziModal;

  $("#modal").iziModal({
    title: 'Test',
    subtitle: 'Test',
    headerColor: '#233a79'
  });

  $(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal').iziModal('open');
  });

Where am I supposed to put $.fn.iziModal = iziModal;? I tried putting it in the iziModal.min.js, the top of my custom scripts, inside my jQuery document (like the code above), and where I have all my imports, none of these places seem to work. Yes I am importing the iziModal.min.js and css.

Any help would be greatly appreciated thanks!

[MichalRemis]

I hade also trouble geting iziModal work with webpack. Problem was, that iziModal was allways including it's own node_modules/jquery into the pack and then 2 Jqueries were included in output files:

I solved it with an ugly workaround and told webpack to always use iziModal's jquery:

config.resolve.alias = { jquery: path.resolve( "./node_modules/izimodal/node_modules/jquery/dist/jquery" ) };

I suppose it's a problem in iziModal sources because other jQuery plugins works as expected without including it's own jquery

[dimasi]

+1 (double jquery is my bundle)