Error ‘TypeError: $(…).filter(…).collapse is not a function’ (in admin/backend > dev-tools console)

So you upgraded your site to 2.4.4.
Then you set your site to production mode.
After you login to admin you will see that the tabs are not working in the configurations and the settings is not saved.
You look in the console section of the dev-tools of the browser it hasĀ ‘TypeError: $(…).filter(…).collapse is not a function’ in theme.js section. Given below is the temporary fix which worked for me.

diff --git a/lib/web/jquery/bootstrap/tab.js b/lib/web/jquery/bootstrap/tab.js
index 928f8de..9805d0b 100644
--- a/lib/web/jquery/bootstrap/tab.js
+++ b/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'

And

diff --git a/lib/web/jquery/bootstrap/collapse.js b/lib/web/jquery/bootstrap/collapse.js
index 95e28ce..2f3fbdb 100644
--- a/lib/web/jquery/bootstrap/collapse.js
+++ b/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,7 +204,7 @@ 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`
@@ -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)

Leave a Reply

Your email address will not be published. Required fields are marked *