I am facing an issue with my function that loads specific modules on specific pages based on body classes. Strangely, the forEach function is not working on iOS devices, particularly in Safari. I have been trying to troubleshoot this problem for some time now but I am unsure of the next steps to take. When using try/catch, I receive the following error message:
TypeError: document.getElementsByTagName("body")[0].classList.forEach is not a function. (In 'document.getElementsByTagName("body")[0].classList.forEach(function(e){var t=e;x.hasOwnProperty(t)&&new x[t]})', 'document.getElementsByTagName("body")[0].classList.forEach is undefined)
Below is the code snippet in question:
import Header from './Components/Header';
import Shelf from './Components/Shelf';
import Home from './Pages/Home';
import Category from './Pages/Category';
import Product from './Pages/Product';
import NossasLojas from './Pages/NossasLojas';
import Checkout from './Pages/Checkout';
const Routes = {
"home": Home,
"single-product": Product,
"page-template-nossas-lojas": NossasLojas,
"archive": Category,
"woocommerce-cart": Checkout
};
export default class Pages {
constructor(){
new Header();
new Shelf();
try {
document.getElementsByTagName("body")[0].classList.forEach(function(e){
let pageName = e;
if(Routes.hasOwnProperty(pageName)){
new Routes[pageName]();
}
})
}
catch (err) {
alert(err);
}
}
}
Any help or guidance on resolving this issue would be greatly appreciated. Thank you! :)