ESLint not defined error in Sage

sage
1

Hi all,
I am new to Sage and running into a problem with yarn build - it is failing with a error 'lightGallery' is not defined.

I have the lightGallery plugin installed (confirmed it is in node_modules). My main.js file looks like this:

// import external dependencies
import 'jquery';

// Import everything from autoload
import './autoload/**/*'

import 'lightgallery';

// import local dependencies
import Router from './util/Router';
import common from './routes/common';
import home from './routes/home';
import aboutUs from './routes/about';
import templateSingle from './routes/template-single';

/** Populate Router instance with DOM routes */
const routes = new Router({
  // All pages
  common,
  // Home page
  home,
  // About Us page, note the change from about-us to aboutUs.
  aboutUs,
  // Villa option pages
  templateSingle,
});

// Load Events
jQuery(document).ready(() => routes.loadEvents());

And my common.js has this at the end:

lightGallery(document.getElementById('progress-gallery'), {
      selector: 'div',
      download: false,
      hideControlOnEnd: true,
    });

I have confirmed that lightGallery is being loaded by looking in the built main.js file. But, I am still getting this not defined error.

I also tried creating a new route for just the lightGallery script, and that didn’t work either. Any ideas what I am doing wrong?

Thanks for any help you can give!

2

Have you checked the lightgallery instructions? They demonstrate how to import the library:

import lightGallery from 'lightgallery';

// Plugins
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'

You don’t appear to be importing the actual object, just the file. You may want to read up on how import works.

1 Like
3

Thank you @alwaysblank! I got it figured out. I appreciate you pointing me in the right direction!

1 Like