Javascript error in Firefox with Variant Picker

Shopify Discussion
1

Horizon theme variant-picker.js throws a script error in Firefox on product pages — private class fields in the custom element appear to initialise before the DOM is ready in Firefox. Any body understand how to fix this? It happened on this page: Wizard nebula | MagSafe Phone Case - AstroImagery Shop

2

Hi @Astroimagery

Could you please send me a screenshot or video of the error so I can check it properly?

Best regards,
Devcoder :laptop:

3

Does not happen on my computer.
More details?
Firefox version?
Screenshots would help too.

4

This is a known Firefox thing with custom elements and private class fields.

Basically what’s happening is Firefox upgrades the custom element as soon as the parser hits the tag, so the constructor runs and private fields get initialized before the child elements inside it are even parsed. Chrome is more forgiving about this timing which is why you only see it in Firefox.

Couple ways to deal with it:

  1. Move anything that touches child elements out of the constructor and into connectedCallback(). By that point the element is actually in the DOM and its children exist. The constructor should really only be setting default values.

  2. Quick and dirty fix: wrap the DOM queries in a requestAnimationFrame or setTimeout(fn, 0) so they run after the parser catches up. Not pretty but it works.

Since this is Horizon’s own code and not yours, honestly the cleanest path is to report it to Shopify as a theme bug. But if you don’t want to wait, you can duplicate the theme, find variant-picker.js in Assets, and move the offending lines yourself.

Drop the actual error from your Firefox console and I can tell you which line needs to move.

5

Can you provide any recent links to this knowledge?

‘VariantPicker’ class in variant-picker.js (and relevant ancestors) do not have constructor functions defined at all.