Uncaught TypeError: Cannot read property 'tagName' of null

[ronilaukkarinen]

I have no idea why it works on front page but not on regular pages. They are similar. No exceptions in nav structure. Using WordPress and hc-offcanvas-nav 6.1.2.

import hcOffcanvasNav from 'hc-offcanvas-nav';

document.addEventListener('DOMContentLoaded', function () {

  // Side nav
  var Nav = new hcOffcanvasNav('#nav', {
    disableAt: false,
    customToggle: '.nav-toggle',
    navTitle: false,
    levelTitles: true,
    levelTitleAsBack: true,
    position: 'right',
    pushContent: '#page',
    insertClose: false,
    labelBack: 'Takaisin',
    activeToggleClass: 'is-active',
  });

});

Any tips?

[somewebmedia]

It's impossible to know what's happening when using the minified script. You could download the repo, run a gulp --dev command on it. And then symlink it to your project where you are using the Nav. So your project will not use it's repo from the package, but the standalone repo instead.

It would look something like this: ln -s /Users/ronilaukkarinen/Projects/hc-offcanvas-nav /Users/ronilaukkarinen/Projects/WordPressTheme/node_modules/hc-offcanvas-nav

Let me know if you have any troubles with that.

[ronilaukkarinen]

Thank you for the tips, didn't realize it brings in it as minified from node module.

Now I'm a bit wiser:

When I change it like so:

// Navigation
// import hcOffcanvasNav from 'hc-offcanvas-nav';
import 'hc-offcanvas-nav/src/js/hc-offcanvas-nav';
import 'hc-offcanvas-nav/src/js/hc-offcanvas-nav.helpers';

I get:

This time with unminified source:

So what next?

I point out it still works perfectly on front page. But not on regular pages. I don't understand why, the navigation is in the same element, the HTML source is the same.

It seems child returns null for some reason and if I add checks for this I get null cloneNode in helpers...

Do you know what could cause this and why?

[ronilaukkarinen]

Error in text form, sorry about the screenshots:

hc-offcanvas-nav.js:565 Uncaught TypeError: Cannot read property 'tagName' of null
    at eval (hc-offcanvas-nav.js:565)
    at Array.filter (<anonymous>)
    at eval (hc-offcanvas-nav.js:564)
    at Array.forEach (<anonymous>)
    at eval (hc-offcanvas-nav.js:542)
    at Array.forEach (<anonymous>)
    at createDom (hc-offcanvas-nav.js:522)
    at createNavDom (hc-offcanvas-nav.js:493)
    at Plugin (hc-offcanvas-nav.js:1018)
    at new HcOffcanvasNav (hc-offcanvas-nav.js:1560)

[ronilaukkarinen]

I have also eliminated the other scripts and run only hc-offcanvas-nav, still the same error.

[somewebmedia]

Can you extract the exact html structure of your menu and paste it here so I can test against it?

[somewebmedia]

When I say html structure of your menu I mean the initial menu before you call the HC Off-canvas Nav on it.

[ronilaukkarinen]

Thanks for the quick responses!

The custom <button> element is right after body opening tag, HTML output before JS:

<!-- NB! Accessibility: Add/remove has-visible-label class for button if you want to enable/disable visible "Show menu/Hide menu" label for seeing users -->

  <button aria-controls="nav" id="nav-toggle" class="nav-toggle hamburger" type="button" aria-label="Avaa päävalikko">
  <span class="hamburger-box">
  <span class="hamburger-inner"></span>
  </span>
  <span id="nav-toggle-label" class="nav-toggle-label">Avaa päävalikko</span>
  </button>

Here's the <nav> element:

<nav id="nav" class="nav-primary" aria-label="Päävalikko">
<ul id="main-menu" class="menu-items"><li role="none" id="menu-item-1077" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home greencare-menu-item menu-item-1077"><a role="menuitem" href="//localhost:3000/">Etusivu</a></li>
  <li role="none" id="menu-item-1036" class="menu-item menu-item-type-post_type menu-item-object-page greencare-menu-item menu-item-1036"><a role="menuitem" href="//localhost:3000/tietoa/">Tietoa</a></li>
  <li role="none" id="menu-item-1038" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children greencare-menu-item menu-item-1038 dropdown"><a role="menuitem" href="//localhost:3000/irkkiin/" data-toggle="dropdown" class="dropdown">Ohje </a><button class="dropdown-toggle" aria-expanded="false" aria-label="Avaa alavalikko"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7"><path fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1.385 1.417L6 5.583m4.615-4.166L6 5.583"/></svg>
  </button>
  <ul class="sub-menu">
  <li role="none" id="menu-item-1344" class="menu-item menu-item-type-custom menu-item-object-custom greencare-menu-item menu-item-1344"><a role="menuitem" href="#">Test</a></li>
  </ul>
  </li>
  <li role="none" id="menu-item-1333" class="menu-item menu-item-type-post_type menu-item-object-page greencare-menu-item menu-item-1333"><a role="menuitem" href="//localhost:3000/irkkiin-alypuhelimella/">Irkkiin älypuhelimella</a></li>
  <li role="none" id="menu-item-1327" class="menu-item menu-item-type-post_type menu-item-object-page greencare-menu-item menu-item-1327"><a role="menuitem" href="//localhost:3000/ilmainen-irc-shell/">Ilmainen IRC-shell</a></li>
  <li role="none" id="menu-item-1035" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-21 current_page_item greencare-menu-item menu-item-1035 active"><a role="menuitem" href="//localhost:3000/komennot/">Komennot</a></li>
  <li role="none" id="menu-item-1293" class="menu-item menu-item-type-post_type menu-item-object-page greencare-menu-item menu-item-1293"><a role="menuitem" href="//localhost:3000/pelit/">Pelit</a></li>
  <li role="none" id="menu-item-1112" class="menu-item menu-item-type-custom menu-item-object-custom greencare-menu-item menu-item-1112"><a role="menuitem" href="/miitit">Miitit</a></li>
  <li role="none" id="menu-item-1032" class="menu-item menu-item-type-post_type menu-item-object-page greencare-menu-item menu-item-1032"><a role="menuitem" href="//localhost:3000/blogi/">Blogi</a></li>
  <li role="none" id="menu-item-1040" class="menu-item menu-item-type-post_type menu-item-object-page greencare-menu-item menu-item-1040"><a role="menuitem" href="//localhost:3000/paidat/">Paidat</a></li>
  </ul>
  </nav><!-- #nav -->

The source code is actually public, if you want to take a look here's the navigation and here's my nav-walker.php and your hc-nav-menu-walker.php. I have tried also without my nav walker but no solution there either.

WordPress updated its jQuery version on 5.6 so I suspect there's a conflict but I also tried with older jQuery and it doesn't help. And vanilla JS should not conflict with it anyway, right?

[ronilaukkarinen]

Seems to work with your default nav structure:

<nav id="nav">
  <ul>
    <li data-nav-custom-content>
      <div>Some custom content</div>
    </li>
    <li data-nav-highlight><a href="#">Home</a></li>
    <li data-nav-active>
      <a href="#">About</a>
      <ul data-nav-active><!-- or active attribute can be here -->
        <li><a href="#">Team</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Services</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a data-nav-close="false" href="#">Add Page</a></li>
  </ul>
</nav>

So there's something I need to change... will report back.

[ronilaukkarinen]

Problem solved! I had a stray ending tag in site <header>...

That caused extra elements inside <nav> in dom... what a stupid thing. Nothing wrong with your code. Glad I finally found the culprit.