Scrollspy: Cannot read property 'classList' of null, when target doesn't exist.

Created by: yura-x

Console error appears when adding a navbar with links but without corresponding HTML elements with the appropriate IDs.

https://i.imgur.com/IyLSp3D.png

This can happen if user will add a links to the navbar in the dashboard and we do not know if links will be internal or external. Console error appears only if page have a small height and has no scrollbar.

Maybe it is good idea to check if const link is not empty before tho check it's classList property after this line of code?

const link = SelectorEngine.findOne(queries.join(','))

Operating system and version: Linux Mint 20.04
Browser and version: Chromium Version 89.0.4389.128 (Official Build) for Linux Mint (64-bit), Opera Version:75.0.3969.218
Code to reproduce the issue:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
    <body data-bs-spy="scroll" data-bs-target="#navbar-example2">
      <div class="container">

  <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link" href="#scrollspyHeading1">First</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#scrollspyHeading2">Second</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
          <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
        </ul>
      </li>
    </ul>
  </nav>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non turpis fermentum, venenatis tellus eget, aliquam erat. Quisque porta sed sem ac convallis. Duis eu odio placerat, efficitur enim ac, viverra turpis. Aenean ante ex, tempor nec finibus at, ullamcorper id dolor. Aenean vulputate, purus eget imperdiet tincidunt, tellus eros vestibulum est, vitae laoreet leo elit vitae leo. Sed sit amet consectetur massa. Cras egestas felis ex, eget congue justo commodo placerat. Nulla eleifend interdum massa, at laoreet risus scelerisque ut. In ac tincidunt nunc.</p>

      </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>


  </body>
</html>