WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 4 months ago

Last modified 4 months ago

#52773 closed defect (bug) (fixed)

Twenty Twenty-One Theme - "Can't read property querySelector of null" console error

Reported by: sushmak Owned by: ryelle
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

I am getting this console error while designing a custom header on my site - https://share.getcloudapp.com/Z4u68O9Z

primary-navigation.js?ver=1.2:172 Uncaught TypeError: Cannot read property 'querySelectorAll' of null

This error is from Primary-navigation.js from the Twenty Twenty-One theme.

I am using an [Elementor](https://wordpress.org/plugins/elementor/) plugin to design a custom header.

I have added a navigation menu in the header and the below error appears in the console of my Elementor editor.

I debugged the issue further and seems like this issue is due to the below code in the Twenty Twenty-One theme.

File Path - wp-content\themes\twentytwentyone\assets\js\primary-navigation.js
Line No. - 170
Code - https://share.getcloudapp.com/jkueN9NK

In the above code site-navigation ID is not present in the navigation menu. To fix this we need to add a null check before applying queryselectall().

Change History (5)

This ticket was mentioned in PR #1090 on WordPress/wordpress-develop by sushmak02.


6 months ago

  • Keywords has-patch added; needs-patch removed

Twenty Twenty-One Theme - 'Can't read property querySelector of null' console error, while designing a custom header on my site.

I am getting this console error while designing a custom header on my site - https://share.getcloudapp.com/Z4u68O9Z

This error is from Primary-navigation.js from the Twenty Twenty-One theme.

I am using an Elementor plugin to design a custom header.
I have added a navigation menu in the header and the below error appears in the console of my Elementor editor.
I debugged the issue further and this issue is due to the below code in the Twenty Twenty-One theme.

Trac ticket: https://core.trac.wordpress.org/ticket/52773#no0

#2 @SergeyBiryukov
6 months ago

  • Component changed from Themes to Bundled Theme
  • Milestone changed from Awaiting Review to 5.8

#3 @ryelle
4 months ago

  • Owner set to ryelle
  • Status changed from new to reviewing

#4 @ryelle
4 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 51072:

Twenty Twenty-One: Check for navigation element before using it.

This prevents a javascript error in case the primary navigation has been removed, for example in a child theme.

Props sushmak.
Fixes #52773.

#5 @prbot
4 months ago

ryelle commented on PR #1090:

Committed in r51072. Thanks for the report & patch!

Note: See TracTickets for help on using tickets.