Hi guys,
I have a problem with Sage 10 - my theme works fine when I’m running yarn dev, but when I use yarn build to build my theme, none of my javascript seems to be working.
Here’s my app.js:
import {domReady} from '@roots/sage/client';
import {slick} from '../../node_modules/slick-carousel/slick/slick';
import $ from "jquery";
/**
* app.main
*/
const main = async (err) => {
if (err) {
// handle hmr errors
console.error(err);
}
// application code
};
/**
* Initialize
*
* @see https://webpack.js.org/api/hot-module-replacement
*/
domReady(main);
import.meta.webpackHot?.accept(main);
// AOS stuff
import AOS from 'aos';
document.addEventListener('DOMContentLoaded', () => {
AOS.init();
});
//Slick SLider stuff
$('.projects-slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
prevArrow: $('.slick-prev'),
nextArrow: $('.slick-next')
});
$('.projects-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
const link = document.querySelector(`.js-slider-nav a[data-slide="${currentSlide+1}"]`);
$('a[data-slide]').removeClass('active');
link?.classList?.add('active');
});
$('a[data-slide]').on('click', function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.projects-slider').slick('slickGoTo', slideno - 1);
$('a[data-slide]').removeClass('active');
this.classList.add('active');
});
//Add class to header on scroll
$(window).on('scroll', function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
$("#site-header").addClass("scrolled");
} else {
$("#site-header").removeClass("scrolled");
}
});
//smoothscroll anchor links
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.on('click', function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
/**
* Initialize
*
* @see https://webpack.js.org/api/hot-module-replacement
*/
domReady(main);
import.meta.webpackHot?.accept(main);
I have noticed that on line 2, it tells me that slick is declared but never read, but it is obviously read… I saw another post where someone had a similar issue and removing unread imports seemed to fix the issue, but I can’t remove this because I need it! Any ideas how I can get this up and running? I really like Sage 10’s development workflow, but I always seem to hit hurdles when coming to build and deploy!
Thanks in advance guys 