ScrollTrigger.js: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘pin’) GreenSock, GSAP

I inherited a project with no documentation and keep getting the error ScrollTrigger.js: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pin') in the web console when going away from a page and then back to it. How do I define pin as true or false or something in the various JavaScript components? This is built in Pug JS. Also getting this error Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'curTrigger.pin')

Some components have this:

this.magicPin();

magicPin() {
        ScrollTrigger.matchMedia({
            '(min-width:768px)': () => {
                ScrollTrigger.create({
                    trigger: this.items,
                    start: 'center center',
                    end: () => (80 * this.item.length * 2) + '%',
                    pin: true,
                });
            }
        });
    }

And some do not have magicPin or ScrollTrigger defined:

import {Component} from 'bona';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import {magicSlideElementAppear} from '../lib/transitions';

export default class Billboard extends Component {
    constructor() {
        super(...arguments);

        this.header = this.el.querySelector('.billboard-header');
        this.text = this.el.querySelector('.billboard-text');
        this.action = this.el.querySelector('.billboard-action');
    }

    async onInit() {
        await document.fonts.ready;

        this.magicShow();
    }

    magicShow() {
        if (this.header) magicSlideElementAppear(this.header);
        if (this.text) magicSlideElementAppear(this.text);
        if (this.action) magicSlideElementAppear(this.action);
    }
}

I am just wondering how to define it in the components that don’t have or need it.