javascriptjqueryyarnpkgjquery-isotopewebpack-encore

Webpack Encore & jQuery plugin : $(...).isotope is not a function


I'm working on a Symfony5 project, with Yarn & jQuery. I have an error when I try to use the jQuery plugin "isotope-layout" with Webpack Encore.

I try to fix it for many hours but I might not be doing it the right way.

Here is my code :

webpack.config.js

// Same error with or without "autoProvidejQuery"
Encore.autoProvidejQuery();

app.js

import 'jquery';
import 'popper.js';
import 'bootstrap';
import 'isotope-layout';

// start the Stimulus application
import './bootstrap';

custom.js

import jQuery from 'jquery';
import 'isotope-layout';

(function ($) {

    // Here is the error :
    $(...).isotope({...});

})(jQuery);

Error :

Uncaught TypeError: $(...).isotope is not a function

Solution

  • You don't have to use jQuery when using Isotope. You can use this example from their Webpack documentation:

    var Isotope = require('isotope-layout');
    
    var iso = new Isotope( '.grid', {
      // options...
    });
    

    There is also an example if you want to use jQuery. To install it:

    npm install jquery
    npm install jquery-bridget
    

    And than:

    var $ = require('jquery');
    var jQueryBridget = require('jquery-bridget');
    var Isotope = require('isotope-layout');
    // make Isotope a jQuery plugin
    jQueryBridget( 'isotope', Isotope, $ );
    // now you can use $().isotope()
    $('.grid').isotope({
      // options...
    });
    

    If you're using modern Javascript (and you're using Webpack, great!), you might not need jQuery in many cases.