Search code examples
javascriptlaravelwebpackjquery-isotopelaravel-mix

Metafizzy Isotope Uncaught TypeError

I am using Laravel for a project, with Laravel Mix compiling my JS and SCSS.

On one of the pages I have a portfolio filter, I want to use Metafizzy's Isotope as it has worked perfect in previous projects.

I included jQuery, followed by the isotope package locally, and finally my main.js file, all of which are before the closing body tag.

I'm using the exact same javascript code from this Codepen Demo in my main.js file: https://codepen.io/desandro/pen/JEojz

However I get the following error in my console:

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

I have tried placing my main.js file before and after the isotope package:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>

I have also tried installing via npm and adding the following to my main.js file:

var Isotope = require('isotope-layout');

No matter what I do, I get the same error and I'm not sure how to get this working with my Laravel project. Any help would be appreciated.

Solution

  • Looks like I forgot to wrap it in $(document).ready(function() {...})