Cannot read properties of null (reading ‘querySelector’)
at new (product-form.js:7:17)
Is intermitingly being loaded prior to DOM being ready leading to customers clicking add to cart and ending at an error page. The resource file is a stock Shopify file at:
/cdn/shop/t/1/assets/product-form.js
thus for those clients using Shopify themes deployed by Shopify themselves are quite stuck. There are other reports of this in other languages and my guess is any reports to shop owners from clients would be put down to user error or similar. However in this case it most certainly is not.
I can replicate this case on a stock platform with no apps and still see the error randomly.
You can see in console that on product page loads it is entirely random on the load order of the JS assets instead of deferred until DOM load. This causes queryselector to be unavailable (not yet loaded) and thus when a customer clicks add to cart you end up at a “Something went wrong” page under the URL: https://crafty-cows.co.uk/products/feral-child-dtf-front-back
The product I have used is only an example case and can happen on products with stock shopify variants and those with app embeds for additional options. This is causing a headache for customers who add a product to cart and wish to add an alternative variant version of something that “just worked” to then be faced with an error , adding an additional level of confusion to the shopping experience.
Is this happening with a fresh version of Dawn? I can replicate on the store you linked, but I can’t replicate with a fresh version of Dawn - could this be due to the app embed you mentioned, or a Liquid customisation?
No it was some form of issue with Dawn in general it seemed although the new version did clear that error we ended up with others. However we were working on a new theme entirely which is now live for us and has by default resolved all our issues.
