Support » Fixing WordPress » Theme error in console with multiple themes

  • Resolved nickk40

    (@nickk40)


    I created an application on cloudways.com with only WordPress 5.6.2 installed. In addition, I installed the plugin LearnDash for managing a course platform. Using LearnDash I created what in LearnDash is called a Lesson.

    Opening the created Lesson page, I have the following error in the console:
    https://i.ibb.co/XxgvX3t/console.gif

    Uncaught TypeError: Cannot read property ‘querySelector’ of null
    at n (frontend.min.js?ver=3.0.2:1)
    at frontend.min.js?ver=3.0.2:1

    It points to /wp-content/themes/twentytwentyone/assets/js/primary-navigation.js?ver=1.1.

    The error points to this line in that file:

    document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li )

    where getElementById is null.

    Or see line 170 on this site: https://wpseek.com/source/wp/latest/nav.html?wp-content/themes/twentytwentyone/assets/js/primary-navigation.js.source.html

    When I switched to the free Astra theme, a similar error is there (but because of the minified version more difficult to read) where querySelector is null for: if(void 0===e){if(!(d=i.querySelector("#ast-mobile-header"))

    I contacted LearnDash support but they say it doesn’t appear to be an error caused by Learndash.

    Any idea what is causing this error?

    • This topic was modified 1 year, 9 months ago by nickk40.
Viewing 10 replies - 1 through 10 (of 10 total)
  • Shariq Khan

    (@shariqkhan2012)

    frontend.min.js is part of hat plugin or theme?

    Thread Starter nickk40

    (@nickk40)

    It’s part of the theme.

    Shariq Khan

    (@shariqkhan2012)

    Which theme? I dont see it in the ‘twenty twentyone’ theme

    Thread Starter nickk40

    (@nickk40)

    Ahh, you’re absolutely right. I’m mixing up the Astra and the Twenty Twenty One themes here. Under the Twenty Twenty One theme I get:

    Uncaught TypeError: Cannot read property ‘querySelectorAll’ of null
    at new navMenu (primary-navigation.js?ver=1.1:170)
    at primary-navigation.js?ver=1.1:182

    https://ibb.co/RCzL6Bj

    It points to
    /wp-content/themes/twentytwentyone/assets/js/primary-navigation.js?ver=1.1

    The error points to this line in that file:

    document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li )

    where getElementById is null.

    Under the Astra theme, I get:

    Uncaught TypeError: Cannot read property ‘querySelector’ of null
    at n (frontend.min.js?ver=3.0.2:1)
    at frontend.min.js?ver=3.0.2:1

    https://i.ibb.co/XxgvX3t/console.gif

    It points to example.com/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=3.0.2, line:

    if(void 0===e){if(!(d=i.querySelector("#ast-mobile-header")))return;

    where querySelector is null.

    • This reply was modified 1 year, 9 months ago by nickk40.
    Shariq Khan

    (@shariqkhan2012)

    Can you share the URL of your website? Its very hard to figure out whats happening without actually looking at the site

    Shariq Khan

    (@shariqkhan2012)

    Out of curiosity, have you assigned a menu to the location “Primary Menu” (WP Admin => Appearances => Menu)?

    Thread Starter nickk40

    (@nickk40)

    I understand sharing the website link would make it easier to solve, but unfortunately I can’t do that.

    Under Appearances > Menu, I have indeed build a menu (with items as well as sub items) that is assigned to both “Primary Menu” and to “Mobile Menu”.

    Thread Starter nickk40

    (@nickk40)

    I had only tested it with the free Astra theme and the Twenty Twenty One theme, both of which generated a different, but similar, error. Now also trying the Twenty Twenty, the error is gone. Any ideas how to solve this, especially under the Astra theme, are appreciated.

    Thread Starter nickk40

    (@nickk40)

    I reported the error to the Astra support team, and the latest update of the team has solved the error 🙂

    I had the same problem. I use elementor’s menu widget, referencing the menu which is assigned as “primary menu”. Everything works but the javascript error appears, expecting an element with id “site-navigation” – which is not present in the DOM. After the mention by @shariqkhan2012 I removed the “primary menu” check and the error disappeared.
    That theme’s code should check for the existence of the ID before chaining the next statement, but for now, it’s easily fixed (once you know…)

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Theme error in console with multiple themes’ is closed to new replies.