magento2: Magento 2.4.4 admin panel - Uncaught SyntaxError: Unexpected token 'const'

Summary (*)

Magento 2.4.4 running on PHP 8.1 in Production mode

If you enable the js bundling and minify the scripts. php bin/magento config:set dev/js/minify_files 1 php bin/magento config:set dev/js/enable_js_bundling 1

After running the deployment and logging into the admin panel. We can’t click on any menue option. There is an error in the browser console: Uncaught SyntaxError: Unexpected token ‘const’

Preconditions (*)

PHP 8.1
Magento 2.4.4, 2.4-develop
Magento instace should be in production mode

Steps to reproduce (*)

Enable JS bundling.
Minify the JS files
Run deployment
Login to the admin panel.

Expected result (*)

We should be able to access admin panel without any error.

Actual result (*)

We are getting the following error and not able to click on any menu option:

Please provide Severity assessment for the Issue as Reporter. This information will help during Confirmation and Issue triage processes.

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”.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 4
Comments: 15 (3 by maintainers)

Most upvoted comments

Is someone working on a PR to fix this?

kolaente on May 23, 2022

Here is the solution:- lib/web/jquery/bootstrap/collapse.js @@ -32,7 +32,7 @@ define([ const VERSION = ‘5.1.3’ const NAME = ‘collapse’ const DATA_KEY = ‘bs.collapse’ const EVENT_KEY = .${DATA_KEY} const EVENT_KEY = .${DATA_KEY}; const DATA_API_KEY = ‘.data-api’

const Default = {

@@ -45,17 +45,17 @@ define([ parent: ‘(null|element)’ }

const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;

const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_COLLAPSE = 'collapse'
const CLASS_NAME_COLLAPSING = 'collapsing'
const CLASS_NAME_COLLAPSED = 'collapsed'
const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`
const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`;
const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'

const WIDTH = 'width'

@@ -204,10 +204,10 @@ define([ }

    const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
    const scrollSize = `scroll${capitalizedDimension}`
    const scrollSize = `scroll${capitalizedDimension}`;

    this._queueCallback(complete, this._element, true)
    this._element.style[dimension] = `${this._element[scrollSize]}px`
    this._element.style[dimension] = `${this._element[scrollSize]}px`;
}

Collapse.prototype.hide = function() {

@@ -222,7 +222,7 @@ define([

    const dimension = this._getDimension()

    this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`
    this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`;

    reflow(this._element)

and

lib/web/jquery/bootstrap/tab.js

@@ -28,14 +28,14 @@ define([ const VERSION = ‘5.1.3’ const NAME = ‘tab’ const DATA_KEY = ‘bs.tab’ const EVENT_KEY = .${DATA_KEY} const EVENT_KEY = .${DATA_KEY}; const DATA_API_KEY = ‘.data-api’

const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;

const CLASS_NAME_DROPDOWN_MENU = 'dropdown-menu'
const CLASS_NAME_ACTIVE = 'active'

Direct link: https://github.com/softinfoline/magento2/blob/be6341ebd31e0b67f6339714ac570689b88c8016/lib/web/jquery/bootstrap/collapse.js https://github.com/softinfoline/magento2/blob/d864fc370673453bf82f4e5f546f732224fe6880/lib/web/jquery/bootstrap/tab.js

softinfoline on Apr 20, 2022

Magento have provided me with the following patch for this: https://gist.github.com/ssx/275bc6c9674277ed8d26592235f1cc6b

ssx on May 24, 2022

Issue still present on 2.4.4-p3

boneio on Jun 19, 2023

Hi. Also facing this issue in 2.4.4-p2

Seppo-Konttinen-Solteq on Dec 13, 2022

This is still present in 2.4.4-p2

technodelight on Nov 14, 2022