How to write a jQuery plugin compatible with Webpack Encore

Viewed 24

I've a small, custom jQuery plugin:

(function ($) {

    $.StandardForm = function (element) {
        
        // ...
    };

    $.StandardForm.prototype = {

        submit: function(onDone, onError, always) {
        
            // ...

            $.ajax({

               // ...   
            })
        },


        startSubmit: function() {

            // ...
        },

    // ..
    };

}(jQuery));

Now I'm trying to modify to to be used with Webpack Encore. I want to do it the proper way, neither with global.$ = $; nor with .autoProvidejQuery().

I tried to modify it like this:

import $ from "jquery";
(function ($) {

    $.StandardForm = function (element) {
        
        // ...
    };

    $.StandardForm.prototype = {

        submit: function(onDone, onError, always) {
        
            // ...

            $.ajax({

               // ...   
            })
        },


        startSubmit: function() {

            // ...
        },

    // ..
    };

}(jQuery));

The first $ is ok, but then it fails on the final }(jQuery));:

Uncaught ReferenceError: jQuery is not defined

Yes, it's obvious "why", but I don't know what's the right syntax to import jQuery and alias it to $ too.

I tried:

import $ from "jquery";
import jQuery from "jquery";

But it explodes.

Any hint?

0 Answers
Related