Unable to import isotope plugin---"$(container).isotope is not a function"

Question

I've had zero luck with getting the Metafizzy Isotope plugin working. The Network tab shows that it's not coming through.

I installed isotope-layout and required it in my main-file.js, but the code fails to recognize $(container).isotope.

The part that's blacked out is the actual name of main-file.js.

I'm also working with webpack and have wondered if it's part of the problem, but I can't say for sure.

---

index.js:

// css imports here

import "jquery/dist/jquery.min.js";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

import mainfile from "./SiteAssets/scripts/main-file.js";

main-file.js:

import axios from "axios";
import "@babel/polyfill/dist/polyfill.js";

var isotope = require('isotope-layout'); // Seeing "'isotope' is declared but its value is never read

// var isotope = require('imports-loader?$=jquery!isotope-layout/dist/isotope.pkgd');

// import isotope from "isotope-layout";

let myClass,
    names,
    _token;

export default class {
    constructor() {
        myClass = this;
        myClass.setTokenVar();
        // a few irrelevant things here

        myClass.loadSpecFilter();

    }

     loadSpecFilter() {
        var $grid = $('.keyContactDiv').isotope({
            itemSelector: '.grid-item',
            // layoutMode: 'fitRows',
            getSortData: {
                name: '.spec-name'
            }
        })

        $('#filters').on( 'click', 'button', function() {
            var sortByValue = $(this).attr('data-sort-by');
            $grid.isotope({ sortBy: sortByValue });
        });

        $('.button-group').each( function( i, buttonGroup ) {
            var $buttonGroup = $( buttonGroup );
            $buttonGroup.on( 'click', 'button', function() {
                $buttonGroup.find('.is-checked').removeClass('is-checked');
                $( this ).addClass('is-checked');
            });
        });
     }

}

my-html.html:

<div class="container">
   <div class="filters">
        <div class="btn-group button-group">
            <button type="button" class="btn btn-info filter-item" data-filter="*">Show All</button>
            <button type="button" class="btn btn-info filter-item" data-sort-by="spec-name">A-Z</button>
            <!-- some other buttons here -->
        </div>
    </div>
</div>

---

Finally, I used JS and jQuery to create the div elements that I want to filter. Here's a screencap:

Link

Answer 1

Try this:

npm install jquery
npm install jquery-bridget

import $ from 'jquery';
import jQueryBridget from 'jquery-bridget';
import Isotope from 'isotope-layout';

// make Isotope a jQuery plugin
jQueryBridget( 'isotope', Isotope, $ );
// now you can use $().isotope()
$('.grid').isotope({
  // options...
});

OR

import $ from "jquery";
import Isotope from "isotope-layout";

var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
          itemSelector: ".all",
          percentPosition: true,
          masonry: {
            columnWidth: ".all"
          }
});
$('.filters ul li').click(function() { // To filter your isotope.
    var data = $(this).attr('data-filter');
    iso.arrange({
       filter: data // All grid items
    });
});