Isotope is not defined

[Tartamata]

Hi everybody,

I’ve been trying to add Isotope into my theme. (sage 10), however, I keep running into the error "Uncaught ReferenceError: Isotope is not defined"

• Isotope successfully included with yarn add Isotope-layout
• app.js : import ‘isotope-layout/dist/isotope.pkgd.min.js’;

Here is the example im trying to reproduce:

It works fine when i link directly to Isotope files:

I’m able to make the jQuery version work but not Vanilla one.
jQuery version here: https://codepen.io/desandro/pen/Ehgij

Any idea ?

Thanks

[alwaysblank]

The isotope docs have webpack instructions: https://isotope.metafizzy.co/extras.html#webpack I would start there.

[Tartamata]

@Tartamata

I’m able to make the jQuery version work but not Vanilla one.

Thank you
Actually as said above, I’m able to make the jQuery version work but not Vanilla one.
So my problem is that when i use Vanilla js it doesn’t work and i get the error above
Vanilla version : https://codepen.io/desandro/pen/BgcCD

[alwaysblank]

Can you show us your actual script? Your error says that Isotope is not defined, which means it isn’t being imported correctly. Are you importing the class as shown in the docs I linked?

[Tartamata]

Thank you for your reply

• Isotope successfully included with yarn add Isotope-layout
  In app.js :
  import ‘isotope-layout/dist/isotope.pkgd.min.js’;

   var elem = document.querySelector('.grid-filter');
   var iso = new Isotope( elem, {
     // options
     itemSelector: '.col',
     layoutMode: 'fitRows'
   });
   
   // element argument can be a selector string
   //   for an individual element
   var iso = new Isotope( '.grid-filter', {
     // options
   });
  

It works fine when i link directly to Isotope files like this:
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

[csorrentino]

As mentioned above, it doesn’t look like Isotope is defined. You should be able to add this to the imports: import Isotope from 'isotope-layout';

or as the docs mention:

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

[Tartamata]

Thank you,
Why the jQuery version is working then ?

[alwaysblank]

jQuery uses a different loading process to the module system used by imports. It probably puts something in the global scope, while the imported vanilla version is more specifically scoped by the webpack build process.

[Tartamata]

Thank you @csorrentino it works