Hi,
I am trying to use a theme into my Laravel project. The theme has javascript files that use tiny-slider and js-cookie packages. Here is my setup:
// webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
// resources/js/app.js
require('./bootstrap');
import '@fortawesome/fontawesome-free/js/all.js';
import { tns } from 'tiny-slider/src/tiny-slider.js';
import Cookies from 'js-cookie';
require('./theme/dark-mode.js');
require('./theme/testimonials.js');
// resources/js/theme/testimonials.js
const slider = tns({
container: '.testimonial-carousel',
loop: true,
items: 3,
responsive: {
0:{
items:1,
},
768:{
items:2,
},
1200: {
items:3,
}
},
slideBy: 'page',
nav: true,
autoplay: true,
autoplayButtonOutput: false,
mouseDrag: true,
lazyload: true,
gutter: 30,
navPosition: 'bottom',
mouseDrag: true,
controls: false,
speed: 800,
});
// resources/js/theme/dark-mode.js
$(document).ready(function() {
function setThemeFromCookie() {
// Check if the cookie is set
if (typeof Cookies.get('mode') !== "undefined" ) {
$('body').addClass("dark-mode");
$('#darkmode').attr('checked', true); // toggle change
console.log('Cookie: dark mode' );
} else {
$('body').removeClass("dark-mode");
$('#darkmode').attr('checked', false); // toggle change
console.log('Cookie: light mode' );
}
}
setThemeFromCookie();
$('#darkmode').on('change', function(e){
if ($(this).is(':checked')) {
$('body').addClass('dark-mode');
//Set cookies for 7 days
Cookies.set('mode', 'dark-mode', { expires: 7 });
} else {
$('body').removeClass('dark-mode');
//Remove cookies
Cookies.remove('mode');
}
});
});
When I load the app, I am getting the following errors:
Uncaught ReferenceError: tns is not defined
at Object../resources/js/theme/testimonials.js (app.js:46323)
at __webpack_require__ (app.js:20)
at Module../resources/js/app.js (app.js:46099)
at __webpack_require__ (app.js:20)
at Object.0 (app.js:46368)
at __webpack_require__ (app.js:20)
at app.js:84
at app.js:87
Uncaught ReferenceError: Cookies is not defined
at setThemeFromCookie (app.js:46177)
at HTMLDocument.<anonymous> (app.js:46190)
at mightThrow (app.js:14654)
at process (app.js:14722)
Can anyone tell me what I am doing wrong here please?