Uncaught TypeError: Cannot read property 'classList' of null

[Merchant17]

Greetings,

I am having site loading/speed issues. After trying to solve the issue with Wordpress Support for 45 minutes, they said that they believe it is this Console error that is causing the loading issue:

Uncaught TypeError: Cannot read property ‘classList’ of null

WP Support also said that they believe it is the theme that is causing the issue and told me to get in touch with theme support. Can you look into this? I can give you login credentials if needed.

There doesn’t appear to be any plugin conflict that is causing this issue.

[ruenel]

Hello Zachary,

Thanks for writing in!

it is not the theme that is causing the error. It is coming from your custom JS code which you have added in X > Theme Options > JS

// select the x-nav element:
const newNav = document.querySelector('.x-nav');

const menuItemProfile = document.getElementById('menu-item-3116');
menuItemProfile.classList.add('socMenu');

const menuItemActivity = document.getElementById('menu-item-3940');
menuItemActivity.classList.add('socMenu');

const menuItemNotify = document.getElementById('menu-item-1330');
menuItemNotify.classList.add('socMenu');

const menuItemSearch = document.getElementById('menu-item-1335');
menuItemSearch.classList.add('socMenu');

const menuItemSettings = document.getElementById('menu-item-1220');
menuItemSettings.classList.add('socMenu');

const menuItemCart = document.querySelector('.x-menu-item-woocommerce');
menuItemCart.classList.add('socMenu');

// select all default menu items with the new class name:
const nodes2 = document.getElementsByClassName('socMenu');

// now lets create the wrapper2 div:
const wrapper2 = document.createElement('div');
wrapper2.classList.add('socialMenu');

// map nodes2 into new array and append nodes1 using function with node parameter:
const nodes2Array = Array.from(nodes2);
nodes2Array.map(node1 => wrapper2.appendChild(node1));

// and add the wrapper to the container:
newNav.appendChild(wrapper2);


/* Align Follow & Message Button */
// select the parent element that we want div to be insterted in:
const messageFollow = document.querySelector('.um-profile-navbar');

// Select Follow/Unfollow Button & Add Class Name:
const follow = document.querySelector('.um-followers-btn');
follow.classList.add('combinator');

//Select Message Button:
const message = document.querySelector('.um-messaging-btn');
message.classList.add('combinator');

// Select follow/unfollow & message by combinator class name:
const combinator = document.getElementsByClassName('combinator');

// Create Div:
const messageFollowDiv = document.createElement('div');
messageFollowDiv.classList.add('messageFollow');

// Map combinator into new array with node parameter, map the array append:
const messageFollowArray = Array.from(combinator);
messageFollowArray.map(node => messageFollowDiv.appendChild(node));

// and add the wrapper to the container:
messageFollow.appendChild(messageFollowDiv);

Please remove this code and you will no longer see any JS error in your page. You may need to contact the creator of this custom script to resolve the error though.

Hope this helps. Kindly let us know.