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

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';
htmltwitter-bootstrapnpmpopper.jsphpemailsmtplaravel-8laravel-mail


Solution 1:[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>

Solution 2:[2]

You can try to disable SSL Verification to check what's the problem. Open your config/mail.php file and add stream options like this:

<?php

return [
    'mailers' => [
        'smtp' => [
            'transport' => 'smtp',
            'host' => env('MAIL_HOST', 'smtp.mailgun.org'),
            'port' => env('MAIL_PORT', 587),
            'encryption' => env('MAIL_ENCRYPTION', 'tls'),
            'username' => env('MAIL_USERNAME'),
            'password' => env('MAIL_PASSWORD'),
            'timeout' => null,
            'auth_mode' => null,
            // region Disable SSL Verify
            'stream' => [
                'ssl' => [
                    'allow_self_signed' => true,
                    'verify_peer' => false,
                    'verify_peer_name' => false,
                ],
            ],
            // endregion
        ],
    ],
];

Note: This method is the only testing method to determine the problem, not the final solution due to security reasons.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Albert Anstett
Solution 2 Sang Lu

Related Questions