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
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.