peterdickins's avatar

Javascript console error

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?

0 likes
3 replies
tykus's avatar

Import tns, and any other dependencies like Cookies, wherever you are using them, i.e.

// resources/js/theme/testimonials.js
import { tns } from 'tiny-slider/src/tiny-slider.js';

const slider = tns({
	// etc...

Otherwise, you would need to make them global, e.g. by putting them on the window object; don't do this.

1 like
tykus's avatar

If your problem has been solved, please mark the best reply above.

Please or to participate in this conversation.