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

[sushmak]

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().

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

[ryelle]

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.

Committed in r51072. Thanks for the report & patch!