Bootstrap Dropdown: Cannot read properties of null (reading 'classList') - html

Question

I am trying to get a dropdown to appear from a navbar; however, I am getting an error.
Uncaught TypeError: Cannot read properties of null (reading 'classList')
I can confirm I have both Bootstrap and Popper installed through npmjs.
import { createPopper } from '#popperjs/core';
import bootstrap from 'bootstrap';
Both are being imported into a JavaScript file, which is imported as a module into my index HTML file.
I have tried adding Popper to the JavaScript file which contains my imports. This did not work. I would need the dropdown to open below my navbar. What is interesting is that adding my navbar to a website, such as StackBlitz, it works perfectly fine. I feel this has something to do with my npm configuration. I have attached my code below.
Navbar Code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">ABCalc</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Account
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Javascript Imports:
import { createPopper } from '#popperjs/core';
import bootstrap from 'bootstrap';

Answer 1

You need to add the class dropdown-menu to your outer <ul> on line 8 of your code snippet, like so:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">ABCalc</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- next line modified to add dropdown-menu class -->
<ul class="dropdown-menu navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Account
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>