How can I prevent Javascript post-processing issues with older Safari on Shopify?

Technical Q&A
1

Recently we discovered our collection page stopped working on older Safari due to a nullish coalesce operator (??). After going in a few circles, it turns out this is added in by Shopify in some kind of post-processing, probably optimising something.

Is there anything we can do to prevent this? For the short term, I have re-hosted the file on Netlify and the site works again.

See screenshot - on the left is the file uploaded to Shopify (and pretty-printed), on the right is the file we actually uploaded.

https://caniuse.com/?search=nullish

Unfortunately the file we have the issue with controls output of products on the collection page, so we need to find a way around this. As far as I can tell, the actual code which is getting the change might be from bundling Vue, so we could refactor but I’d also like to know what is actually occurring so we know for future reference.

I have seen a similar issue with CSS whitespace - when you use an uncompressed file, Shopify will cut out the space, and this can break some CSS features (pretty obscure features, but it is a difficult one to debug).

1 Like
2

I’ve been testing this and have a straight forward example of the issue. The attached shows the Shopify code editor on the left, and the rendered file on the right with the null coalesce character added.

There is some nuance to how it is choosing when to substitute, but for our case, the substitution is on a file from a vendor library so we can’t edit it without introducing a future problem.

I’d just like to know if there is anyway to prevent the processing beyond hosting the file elsewhere.