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!