Ошибка Javascript — ошибка прослушивателя событий при загрузке страницы

я работаю над погодным приложением, и я получаю эту ошибку после загрузки страницы «Uncaught TypeError: невозможно прочитать свойство addEventListener со значением null» в строке 36.

вот фрагмент кода для Html:

<div class = "weather - app">
          <div class = "panel">
            <form >
                <input type = "text"
                       class = "search"  
                       placeholder = "Search Location .."/>
                <button type = "submit"
                        class = "submit">
                    <i class = "fa fa-search"></i>
                </button>
            </form>
            <ul class = "cities">
                <li class = "city">Paris</li>
                <li class = "city">Las Vegas</li>
                <li class = "city">Japan</li>
                <li class = "city">Sfax</li>
            </ul>
            
        </div>
    </div>
    <script src = "main.js" ></script>`

................................................. ...........................

и для main.js:

const app = document.querySelector('.weather-app');
const form = document.querySelector('.form');
const search = document.querySelector('.search');
const btn = document.querySelector('.submit');
const cities = document.querySelectorAll('.city');

//add sumbit event to the form
form.addEventListener('submit', (e) => {
    e.preventDefault();

    //if input field(search bar) empty throw an alert
    if (search.value.length == 0) {
        alert('Please type in a City name !');
    } else {
        //change default city name to the one written in search bar 
        cityInput = search.value;
        search.value = "";
        app.style.opacity = "0";
    }
});