Uncaught TypeError: Cannot read property 'addEventListener' of null at

Waliduje poniższy formularz który teoretycznie działa ale w konsoli pojawia się błąd Uncaught TypeError: Cannot read property 'addEventListener' of null
at main.js. Czym to może być spowodowane?

 // walidacja formularza customers
const fName = document.getElementById('first_name')
const bAdCustom = document.getElementById('addCustomer')
const pFirstName = document.querySelector('.requiredFirst')
const lastName = document.getElementById('last_name')
const pLastName = document.querySelector('.requiredLast')



const checkNames = () => {
    if (!fName.value) {
        pFirstName.style.color = 'red'
        pFirstName.textContent = 'The first name field is required!'
        fName.setCustomValidity('This field cannot be empty.');
     }
     else {
        pFirstName.textContent = ''

    }
    if (fName.value != '' && !lastName.value) {
        pLastName.style.color = 'red'
        pLastName.textContent = 'The last name field is required!'
        lastName.setCustomValidity('This field cannot be empty.');
    } else {
        pLastName.textContent = ''
    }

}

fName.addEventListener('keyup', function () {
    if (fName.value.length > 1) {
        pFirstName.textContent = ''
        fName.setCustomValidity('');
    }
})
lastName.addEventListener('keyup', function () {
    if (lastName.value.length > 1) {
        pLastName.textContent = ''
        lastName.setCustomValidity('')
    }
})
bAdCustom.addEventListener('click', checkNames)

zobacz, w którym miejscu ci to zgłasza, bo masz w 3 linijkach addEventListener. Któryś z tych elementów jest null. A ponieważ łapiesz je z getElementById, to zapewne podajesz złe id (ew. jeśli uruchamiasz przed załadowaniem strony).