I recently obtained a template for my website that includes the following JS file which is being called from my React component.
!(function($) {
"use strict";
// Hero typed
if ($('.typed').length) {
var typed_strings = $(".typed").data('typed-items');
typed_strings = typed_strings.split(',')
new Typed('.typed', {
strings: typed_strings,
loop: true,
typeSpeed: 100,
backSpeed: 50,
backDelay: 2000
});
}
// Smooth scroll for the navigation menu and links with .scrollto classes
$(document).on('click', '.nav-menu a, .scrollto', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
e.preventDefault();
var target = $(this.hash);
if (target.length) {
var scrollto = target.offset().top;
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
}
return false;
}
}
});
// Activate smooth scroll on page load with hash links in the url
$(document).ready(function() {
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
var scrollto = $(initial_nav).offset().top;
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
}
}
});
// ...
})(jQuery);
After pasting the HTML file into my component and importing all CSS and JS files, I encountered an error in the JS file.
The error messages are as follows: Line 7:1: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 14:9: 'Typed' is not defined no-undef Line 25:9: Unexpected use of 'location' no-restricted-globals Line 25:85: Unexpected use of 'location' no-restricted-globals Line 183:5: 'AOS' is not defined no-undef Line 193:4: 'jQuery' is not defined no-undef
Could someone please advise on how to properly import this JS file into my React component?
Thank you in advance.