Trouble importing dependencies (jquery / other)

[piha-io]

Hey @hayes0724, I'm currently trying to get jquery and slick slider packages to work. I noticed your other post #17 but have been unable to get even jQuery to be exposed. Any help is much appreciated 👍

[hayes0724]

I use both often with packer, import jquery and slick in the same file:

import $ from "jquery";
import slick from 'slick-carousel';

$(document).ready(() => {
 $('#slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '#quoteNav',
      infinite: true,
      centerMode: true
    });
})

[piha-io]

And you are putting this in the src/theme.js correct? That is where I have it

[piha-io]

import $ from "jquery";
import slick from 'slick-carousel';

$(document).ready(() => {
$('#slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '#quoteNav',
infinite: true,
centerMode: true
});
})

So I tried this in both src/scritps/layout/theme.js and src/scripts/templates/index.js but still nothing. Tried accessing slick and jQuery in the console just to see if they are even loading in and they are not.

[hayes0724]

That's weird, you should not be able to access jQuery in console without:

import $ from "jquery";
window.$ = window.jQuery = $

I have not tried accessing slick globally or in the console. I add this to any file that needs it:

import $ from "jquery";
import slick from 'slick-carousel';

Example, If I have a slider on PDP page I would add this to product.js

[piha-io]

I realized after reading the file structure again that I would have to do imports on any page that needs it, my bad xD
I'll have to keep messing around with it, I know I'm missing something simple (as per usual). I appreciate the response!