ESLint saying 'gsap', 'scrolltrigger' and 'lenis' are not defined `no-undef`

My page layout works as intended, so not problem with the actual script(s) firing.

Initially for speed, I loaded JS files as below. Then all the GSAP and Lenis scripts were directly below, just above the closing </body>.

    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js?v=3.3.0-3"></script>
    <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1/bundled/lenis.min.js"></script>
    <script src="js/main.js"></script>
    
    <script>
        
        /* ==========================================================================
           #GSAP
           ========================================================================== */
        
        gsap.registerPlugin(ScrollTrigger);
        
        // var tl = gsap.timeline({
        //  scrollTrigger: {
        //    trigger: ".story__media",
        //    scrub: true,
        //   //pin: true,
        //    start: "-100%",
        //    end: "+=200%"
        //  }
        //   });
        // 
        // tl.from(".story__media img", {scale: 1.4, ease: "power2"})
        
        // const stories = gsap.utils.toArray('.story__media');
        // stories.forEach(story => {
        //   var tl =  gsap.timeline(story, {
        //  scrollTrigger: {
        //    trigger: ".story__media",
        //    scrub: true,
        //    start: "top top",
        //    end: "bottom bottom"
        //  }
        //   })
        //   tl.from(".story__media img", {scale: 2, ease: "power2"})
        // });
        
        const stories = document.querySelectorAll(".story");
        
        stories.forEach((s) => {
          var tl = gsap.timeline({
            scrollTrigger: {
              trigger: s,
              scrub: true,
              end: "bottom top"
            }
          });
        
          tl.from(s.querySelector("img"), {
            scale: 1.6,
            ease: "power2"
          });
        });

        /* ==========================================================================
           #LENIS
           ========================================================================== */
           
        const lenis = new Lenis({
            lerp: 0.1,
            smooth: true,
            direction: "vertical"
        });
        
        lenis.on('scroll', (e) => {
              console.log(e)
        })
        
        function raf(time) {
              lenis.raf(time)
              requestAnimationFrame(raf)
        }
        
        requestAnimationFrame(raf)
        
    </script>

I normally keep my JS in an external file. So I decided to move these into main.js just to tidy things up. Exactly the same script as was on the page. But now I'm getting several errors. The main.js is loaded after all the other scripts so it should be picking them up - and the desired effect on the page still works.

Is this more of an issue with ESLint and interpreting something incorrectly/something I need to exclude?

Look forward to some guidance on this! Thanks in advance!

The problem in your case is that the dependencies you're using are never downloaded into your machine until you visit the website, which is why ESLint can't really detect them.

If you have to import your dependencies in this way, you should then define them as globals to let ESLint know they are indeed defined.

You can add the following comment at the top of your script:

/* global gsap, Lenis, ScrollTrigger */

You can also define them from your config eslint.config.js as such:

export default [
    {
        languageOptions: {
            globals: {
                gsap: "readonly",
                Lenis: "readonly",
                ScrollTrigger: "readonly"
            }
        }
    }
];

With this, ESLint will no longer flag these globals as undefined.