Preconditions and environment

• Mage 2.4.4

Steps to reproduce

1. Open the console on the Product Detail page and define const data={} in the console.
2. Try to navigate the image gallery and get the below error:

./lib/web/magnifier/magnifier.js 26-30 is causing an error depending on contexts

           largeWrapper = options.largeWrapper || '.magnifier-preview',
            $magnifierPreview = $(largeWrapper);

        curThumb = null,
        magnifierOptions = {

It errors out later in the script, saying I cannot redefine const data. This is because the list of variables starting at curThumb doesn't have specified what kind of var it is, thus living in global space.

So a fix would either be

// Comma instead of ;
$magnifierPreview = $(largeWrapper),
curThumb = null,

Or properly initiate the variables

$magnifierPreview = $(largeWrapper);

var curThumb = null,

Expected result

No JS errors

Actual result

JS breaks, product detail page image gallery is not functional anymore.

Additional information

I wouldn't know which solution is preferred which is why I just drop this as an issue with possible solutions provided. Additionally, it would be great to have proper JS linting set up, that doesn't allow global variable declaration like this.

As far as I can see, this has been an issue/unchanged for a few Magento version, it just got triggered by another module/js taking 'control' of the 'data' var-label.

Release note

No response

Triage and priority

• Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.