Bootstrap 4.2.1 - Failed to execute 'querySelector' on 'Document': 'javascript:void(0);' is not a valid selector

I was having this issue, and a comment on this reported issue clued me into the solution. I was copying the example from the Bootstrap docs, and I had to remove the ID from the parent link, and instead have that ID on the container for the child links, without the aria-labeledby property, and add a reference in the parent link data-target property.

This example shows what I was doing, which caused the console errors:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#" data-toggle="dropdown" id="navToggleCommercial" role="button" aria-haspopup="true" aria-expanded="false">
        Commercial
    </a>
    <div class="dropdown-menu" aria-labelledby="navToggleCommercial">
        <a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
    </div>
</li>

This is the solution that worked for me:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#navToggleCommercial" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Individual
    </a>
    <div class="dropdown-menu" id="navToggleCommercial">
        <a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
    </div>
</li>

Here is the solution that works for me

Snippet from Bootstrap 4.1.3

getSelectorFromElement: function getSelectorFromElement(element) {
    var selector = element.getAttribute('data-target');

    if (!selector || selector === '#') {
      selector = element.getAttribute('href') || '';
    }

    try {
      return document.querySelector(selector) ? selector : null;
    } catch (err) {
      return null;
    }
},

Replace it from Bootstrap 4.2.1

getSelectorFromElement: function getSelectorFromElement(element) {
  var selector = element.getAttribute('data-target');

  if (!selector || selector === '#') {
    var hrefAttr = element.getAttribute('href');
    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
  }

  return selector && document.querySelector(selector) ? selector : null;
},

Thanks to PixemWeb github solution

For more info here is the link https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715

=== Change in bootstrap.js v4.2.1 ===

Find below block

getSelectorFromElement: function getSelectorFromElement(element) {
  var selector = element.getAttribute('data-target');

  if (!selector || selector === '#') {
    var hrefAttr = element.getAttribute('href');
    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
  }

  return selector && document.querySelector(selector) ? selector : null;
},

Need to add try and catch exception only as below

Replace

return selector && document.querySelector(selector) ? selector : null;

with

try {
    return selector && document.querySelector(selector) ? selector : null;
} catch (err) {
    return null;
}

=== Change in bootstrap.min.js v4.2.1 ===

Replace

return e&&document.querySelector(e)?e:null

with

try{return e&&document.querySelector(e)?e:null}catch(err){return null;}