js uncaught TypeError : Cannot read property 'addEventListener' of null

I am making a chat app using javascript and node.js I have successfully made this eventListener and I receive "Cannot read property 'addEventListener' of null " error and none of my other functions work.
I thought it is perhaps because the script is executed before the page loads and have replaced the script at the bottom of the page, didn't circumvented. put the whole JS code inside a function which will be called when the window gets loaded, didn't work either.

  <body>
    <div id="main">
      <h1>chatterbox</h1>
      <label>Room:</label>
      <form>
        <label> name : 
          <input class="input-username" type = "text">
        </label>
        <label> comment :
          <input class="input-chat" type = "text">
        </label>
        <button class="btn-submit">Submit</button>
      </form>
    </div>
    <script src="scripts/app.js"></script>
  </body>
</html>

const $chatterBox = document.createElement('ul');
$chatterBox.classList.add('chatterbox')
const $btnSubmit = document.querySelector('.btn-submit')
const $inputChat = document.querySelector('.input-chat')
const $inputName = document.querySelector('.input-username')


const app = {
  server: 'http://52.78.206.149:3000/messages',
  init: () => {
    app.fetch().then((info) => {
      let results = info.results;
      results.forEach(result => {
        app.renderMessage(result)
      });
      document.querySelector("#chats").append($chatterBox);
    })
  },
  fetch: () => {
    return fetch(app.server)
    .then(resp => resp.json())
  }, 
  send: (data) => {
    return fetch(app.server, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
    .then(resp => resp.json())
  },
  clearMessages: () => {
    document.querySelector("#chats").textContent = '';
  },
  renderMessage: (data) => {
    const $li = document.createElement('li');
      $li.classList.add('chat');
      // $li.classList.add(roomname);
    
      const $span = document.createElement('span');
      $span.classList.add('username');
      $span.textContent = data.username;
    
      const $p = document.createElement('p');
      $p.classList.add('chat-content')
      $p.textContent = data.text;
    
      $li.append($span, $p);
      $chatterBox.prepend($li);
      document.querySelector("#chats").append($chatterBox);
  },
  makeNewMessage: () => {
    if (!$inputName.value) {
      alert('name here')
    }
    if (!$inputChat.value) {
      alert('text here!')
    }
    if($inputName.value && $inputChat.value) {
      const data = {
        username: $inputName.value,
        text: $inputChat.value,
        roomname: 'my room'
      }
      app.send(data);
      app.renderMessage(data);
    }
  }
};

app.init()

$btnSubmit.addEventListener('click', app.makeNewMessage, false); // error occurs here