Why am I having this Javascript ".querySelectorAll" issue?

Question

I am following a tutorial to create a portfolio website. I have followed the tutorial exactly with no errors (Yes, I am using a tutorial, I have not built anything on my own yet, but I'm hopefully getting there). I am getting an error message on my live server that the tutorial is not getting and I am not sure how to fix it. Any opinions would be very helpful!

Here is the error message I am receiving: Error Message

And here is the code I am using (The errors are on lines 17,18, and 38):

const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelectorAll('.main-content');


function PageTransitions(){
    //Button click active class
    for(let i = 0; i < sectBtn.length; i++){
        sectBtn[i].addEventListener('click', function(){
            let currentBtn = document.querySelectorAll('.active-btn');
            currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
            this.className += ' active-btn';
        })
    }

    //Sections Active class
17    ***allSections.addEventListener('click', (e) =>{
18        const id = e.target.dataset.id;*** 
        if(id){
            //remove selected from the other btns
            sectBtns.forEach((btn) =>{
                btn.classList.remove('active');
            })
            e.target.classList.add('active');

            //hide other sections
            sections.forEach((section)=>{
                section.classList.remove('active');
            })

            const element = document.getElementById(id);
            element.classList.add('active');
        }
    })
}

38  **PageTransitions()**;

I have tried going back through my video and seeing if I had everything exactly the way the video has it and I do. The goal was for a specific section to appear when a different icon on the website is clicked. For example, if I clicked the "home" icon, a green background would appear, but when I clicked the "contact" icon, a red background would appear, etc...

Unfortunately, the error message is still coming up and it's not allowing the changes to take place and I am not sure how to rectify this issue if I am copying the exact code the tutorial is showing me and it is working on the video but not on my end.

Any opinions are helpful, thank you for your time!